Create React App 创建工程中使用less

安装less、less-loader

npm install less less-loader --save-d

在webpack配置文件添加less相关配置

• 在命令行中运行npm run eject暴露出相关配置文件
• 打开 config 目录下的 webpack.config.js 文件
• 在webpack.config.js文件中找到// style files regexes，如图
• 仿造sass配置，在下方增加less相应配置

    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;

• 在webpack.config.js中找到module>rule中的sass解析配置
• 在sass解析规则下方增加less解析配置

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

注意

less配置规则需放在sass的解析规则的下方，如果放在了file-loader的解析规则下方，less文件解析不会生效