在react脚手架中使用less

一般在react脚手架是默认支持sass的，但是如果要使用less呢

1，安装less

npm install less less-loader -S 

2，在package.json文件里面，插入下面的配置，分别是pc/mobile 二选一

"plugins": [ [ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": true } ] ] //PC
"plugins": [ [ "import", { "libraryName": "antd-mobile", "style": true } ] ] //手机

3，一般配置文件是默认隐藏，所以需要运行指令让配置文件显示出来

npm run eject

//如果运行报错，类似Remove untracked files, stash or commit any changes, and try again.
//就可能是有配置文件做了更改
//依次运行代码
//然后再次执行暴露文件
git add .
git commit -m "提交的一些信息"
npm run eject

4，修改配置文件

//找到下面这段代码，新增lessOption这个字段
//将代码复制一份，吧css改成less
{
  loader: require.resolve('css-loader'),
  options: cssOptions,
},

5，修改config文件

//在config文件夹中，找到webpack.config.js文件
//将下面两行代码，复制一份，然后添加在后面，把sass修改成less
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

6，修改配置文件

//找到下面的代码
//复制一份
//然后吧sass全部改成less
//这个是修改前的
  {
    test: sassRegex,
      exclude: sassModuleRegex,
        use: getStyleLoaders(
          {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
          'sass-loader'
        ),
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
  },
    // Adds support for CSS Modules, but using SASS
    // using the extension .module.scss or .module.sass
    {
      test: sassModuleRegex,
        use: getStyleLoaders(
          {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: {
              getLocalIdent: getCSSModuleLocalIdent,
            },
          },
          'sass-loader'
        ),
    },

修改后

//这个是修改后的
{
  test: lessRegex,
    exclude: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
      ),
        // Don't consider CSS imports dead code even if the
        // containing package claims to have no side effects.
        // Remove this when webpack adds a warning or an error for this.
        // See https://github.com/webpack/webpack/issues/6571
        sideEffects: true,
},
  // Adds support for CSS Modules, but using SASS
  // using the extension .module.scss or .module.sass
  {
    test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: {
            getLocalIdent: getCSSModuleLocalIdent,
          },
        },
        'less-loader'
      ),
  },

7，重启，完成配置