react 中使用less

首先 npm install less-loader less --save -dev

安装之后终端

npm run eject   来暴露webpack的配置文件，如果报错：

Remove untracked files, stash or commit any changes, and try again.

这是因为我们使用脚手架创建一个项目的时候，自动给我们增加了一个.gitignore文件，而我们本地却没有文件仓库。

这就需要在终端输入如下命令：

git add .

git commit -m 'init'

再执行 npm run eject

你会发现多了config为名的文件夹。

最后是我们需要手动在webpack.config.js里配置less

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

找到此处代码：

{
      test: cssModuleRegex,
      use: getStyleLoaders({
      importLoaders: 1,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
      getLocalIdent: getCSSModuleLocalIdent,
         },
   }),
},

下面紧接着做如下配置：

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

找到 getStyleLoaders 函数，做如下配置：参数lessOptions和

 {
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },

const getStyleLoaders = (cssOptions, lessOptions,preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },

重启终端即可使用