使用了css Modual后如何添加antd样式

511 阅读1分钟

方法一

在webpack的config中分别编译antd的样式和项目中的css

精确匹配antd的样式,对于antd的样式不启用css modual

{        test: /\.css$/i,        exclude:[/node_modules/],        use: [          MiniCssExtractPlugin.loader,          {            loader: "css-loader",            options: {              modules: {                exportGlobals: false,                localIdentName: "[local]__[hash:base64]",              },            },          },        ],      },
// 匹配antd的css,不启用css modual      {        test: /\.css$/,        include: [/[\\/]node_modules[\\/].*antd/],        use: [          // MiniCssExtractPlugin.loader,          {loader: 'style-loader'},          {loader: 'css-loader'}        ]      },

在根文件中引入antd样式

import 'antd/dist/antd.css';

方法二

在webpack配置文件中

      {        test: /\.css$/i,        oneOf: [{          resourceQuery: /^\?raw$/,          use: [              require.resolve('style-loader'),              require.resolve('css-loader')          ]      },         use: [          MiniCssExtractPlugin.loader,          {            loader: "css-loader",            options: {              modules: {                exportGlobals: false,                localIdentName: "[local]__[hash:base64]",              },            },          },        ],      },

引入antd是加上?raw

import 'antd/dist/antd.css?raw';

样式就出来了