react使用样式使用模块化module.less

react使用样式使用模块化module.less

1. npm install less less-loader --save-dev

2. 执行npm run eject

3. 找到项目下 config/webpack.config.js，修改webpack.config.js文件配置，一共修改三处
   第一处：

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

第二处：仿照css配置less

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                        ? shouldUseSourceMap
                        : isEnvDevelopment,
                    modules: false
                  },
                  'less-loader'),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                        ? shouldUseSourceMap
                        : isEnvDevelopment,
                    modules: {
                      getLocalIdent: getCSSModuleLocalIdent,
                    }
                  },
                  'less-loader'
              ),
            },

第三处：修改getCSSModuleLocalIdent函数内部，增加less

const fileNameOrFolder = context.resourcePath.match(
    /index\.module\.(css|scss|sass|less)$/
  )