react-cli less安装报错 bezierEasingMixin()；

错误信息

98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                             

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      Error in D:\files\study\vue\web-client\node_modules\view-design\src\styles\color\bezierEasing.less (line 110, column 0)

 @ ./src/assets/custom-theme/custom.less 4:14-238 14:3-18:5 15:22-246
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.19.169:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

解决方案

在webpack.config.js 添加

1. 在const sassModuleRegex = /.module.(scss|sass)$/; 后面添加

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

---

// 找到这块代码，
 {
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'sass-loader'
              ),
            },
           

   // 在上面代码后面添加
   {
            test: lessRegex,
            exclude: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              },
              'less-loader'
            ),
            sideEffects: true,
          },
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                options: {
                  javascriptEnabled: true,
                },
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  mode: 'local',
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              },
              'less-loader'
            ),
          },

3. 找到 const getStyleLoaders = (cssOptions, preProcessor) => {， 在函数体内修改if (preProcessor) {} 体块,替换成下面的代码

    if (preProcessor) {
    if (preProcessor === 'less-loader') {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            root: paths.appSrc,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            // sourceMap: true,
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        }
      );
    } else {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            root: paths.appSrc,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true
          },
        }
      );
    }
  }
    
// lessOptions: { javascriptEnabled: true } 此处是关键点

安装 less less-loader

 npm install less less-loader --save-dev

// 就可以顺利使用less 了