create-react-app 支持less踩坑

• 通过create-react-app 是默认不支持less的，所以需要自己配置
• 编译成功有className在项目中显示为undefined

打开配置

 npm run eject

在项目文件根目录下可以看到config文件夹，打开其中的webpack.config.js

配置

// style files regexes
const cssRegex = /\.css\$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

在下面加上我们的less配置

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

---

找到文件中cssRegex 和 sassRegex的配置项，在同级加上以下内容即可

 // Less 解析配置
  {
     
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
     
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true
      },
      "less-loader"
    ),
    sideEffects: true,
  },
   {
     
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
     
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        "less-loader"
      ),
    },

注意⚠️

如果你看了其他的配置方法，在代码配置规则中加入了以上内容，在运行时发现导入成功，但是className在项目中显示为undefined请加上以下两项中的一项。

modules: {
     
          getLocalIdent: getCSSModuleLocalIdent,
        },

或

modules: true,

这项加上之后，在less文件编译之后，被引用的地方className会保留自己设置的className并拼接上hash值。如下：

如果不加这项配置的话，打包出来的资源className自己也看不懂，不方便开发。