react之通俗易懂配置less

使用create-react-app构建react项目之后，配置less-loader，配置完了后，正常引入less没问题，但是@import "~antd/dist/antd.less"还是会报错：

问题：

Failed to compile.

./node_modules/antd/lib/style/index.less (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/lib/style/index.less)

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

查看代码片段（webpack.config.js）：

// less
{
     test: lessRegex,
     exclude: lessModuleRegex,

     use: getStyleLoaders({
          importLoaders: 3,
          sourceMap: isEnvProduction && shouldUseSourceMap,
    }, 'less-loader')
},

网上也能搜到，很多都是这么解决的，但是到我这里却出问题了？？？然后我就开始研究antd官网写法：

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       modifyVars: {
+         'primary-color': '#1DA57A',
+         'link-color': '#1DA57A',
+         'border-radius-base': '2px',
+         // or
+         'hack': `true; @import "your-less-file-path.less";`, // Override with less file
+       },
+       javascriptEnabled: true,
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

对比我的代码和官网的代码，我发现官网还是原始的写法，并且还加上了一些配置，可以自定义主题，这似乎不错，于是我按照他的来改造。

首先我仔细看了下webpack.config.js里的getStyleLoaders函数，它的返回值是一个loader数组，正好可以作为use的值，它能接收两个参数：一个是cssOptions，接受对象、一个是preProcessor，并且只接受字符串。那么我的这里要传入less-loader以及对应的参数，字符串肯定是不够的，至少要传入对象才行，直接传肯定不行，那么怎么办呢？我想到了js的展开运算符，接下来是完整解决方案。

解决方案：

在webpack.config.js中：

// 大约第50行
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// 大约第460行
// less
{
  test: lessRegex,
  exclude: lessModuleRegex,

  use: getStyleLoaders({
    importLoaders: 3,
    sourceMap: isEnvProduction && shouldUseSourceMap,
  }, 'less-loader')
},
// .module.less
{
  test: lessModuleRegex,
  use: [
    ...getStyleLoaders({
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    }),
    {
      loader: 'less-loader',
      options: {
        modifyVars: {
          'primary-color': '#1DA57A'
        },
        javascriptEnabled: true
      }
    }
  ]
},

然后再在 getCSSModuleLocalIdent.js里边加上less：

到这里就解决了，最后再附上按需加载antd 的配置：

首先，  npm i babel-plugin-import -D  或者 yarn add babel-plugin-import --dev

然后，继续在webpack.config.js里配置：

// 大约第366行
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    customize: require.resolve(
      'babel-preset-react-app/webpack-overrides'
    ),
    
    plugins: [
      [
        require.resolve('babel-plugin-named-asset-import'),
        {
          loaderMap: {
            svg: {
              ReactComponent:
                '@svgr/webpack?-svgo,+titleProp,+ref![path]',
            },
          },
        },
      ],
      // import 按需加载
      [
        "import",
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: true
        }
      ]
    ],

祝看到这篇文章的同学们技术有成！