如何在react中使用antd+less+css modules

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可以模块化，就需要再配置，但是不能全局配置，这样的话会导致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,
              localIndexName:"[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的规则,不开启 css modules。

//@Lynn 这里设置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的支持
              localIdentName: '[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的支持
              // localIdentName: '[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',
                  }),
              ],
          },
      },
  ],
},

至此就配置好了开发环境下的所有代码
同样的代码需要在webpack.config.prod，生产环境的webpack里面再配置一次，打包后的文件各种CSS和less文件才会生效。