antd引入

首先需要需要在react項目中配置antd樣式引入，具體可以見解決引入antd樣式無效問題

配置less

首先安裝less和less-loader

cnpm i --save-dev less less-loader

然后在webpack.config.dev中配置

{
  test: /\.less$/,
  use: [
      require.resolve('style-loader'),
      {
          loader: require.resolve('css-loader')
      },
      {
          loader: require.resolve('less-loader'), // compiles Less to CSS
      },
  ],
},

開啟css modules功能

但是如果我想開啟css modules功能，使less和css可以模塊化，就需要再配置，但是不能全局配置，這樣的話會導(dǎo)致antd沒有使用css modules模塊的框架的樣式無法作用。

開啟less的css modules功能

//@Lynn 這里我開啟自己編寫的less文件的css modules功能 除了node_modules庫中的less，
//也就是可以過濾掉antd庫中的樣式
{
  test: /\.less$/,
  exclude: [/node_modules/],
  use: [
      require.resolve('style-loader'),
      {
          loader: require.resolve('css-loader'),
          options: {
              modules: true,
              localIdentName:"[name]__[local]___[hash:base64:5]"
          },
      },
      {
          loader: require.resolve('less-loader'), // compiles Less to CSS
      },
  ],
},

開啟css的css modules功能

如果想開啟css的css modules功能，就比較麻煩點，除了針對css開啟css modules，還需要需要針對antd的css 單獨寫一條loader的規(guī)則,不開啟 css modules。

//@Lynn 這里設(shè)置css開啟modules支持,node_modules和antd里面的css不開啟
{
  test: /\.css$/,
  exclude: /node_modules|antd\.css/,
  use: [
      require.resolve('style-loader'),
      {
          loader: require.resolve('css-loader'),
          options: {
              importLoaders: 1,
              // 改動
              modules: true,   // 新增對css modules的支持
              localIndetName: '[name]__[local]__[hash:base64:5]', //
          },
      },
      {
          loader: require.resolve('postcss-loader'),
          options: {
              ident: 'postcss',
              plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                      browsers: [
                          '>1%',
                          'last 4 versions',
                          'Firefox ESR',
                          'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                  }),
              ],
          },
      },
  ],
}

//@Lynn 然后針對node_modules和antd里面的css寫編譯配置
{
  test: /\.css$/,
  include: /node_modules|antd\.css/,
  use: [
      require.resolve('style-loader'),
      {
          loader: require.resolve('css-loader'),
          options: {
              importLoaders: 1,
              // 改動
              // modules: true,   // 新增對css modules的支持
              // localIndetName: '[name]__[local]__[hash:base64:5]', //
          },
      },
      {
          loader: require.resolve('postcss-loader'),
          options: {
              ident: 'postcss',
              plugins: () => [
                  require('postcss-flexbugs-fixes'),
                  autoprefixer({
                      browsers: [
                          '>1%',
                          'last 4 versions',
                          'Firefox ESR',
                          'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                  }),
              ],
          },
      },
  ],
},

至此就配置好了開發(fā)環(huán)境下的所有代碼
同樣的代碼需要在webpack.config.prod，生產(chǎn)環(huán)境的webpack里面再配置一次，打包后的文件各種CSS和less文件才會生效。

create-react-app使用antd按需加載的樣式無效問題

基于creact-react-app的webpack4升級之路