react antd less-loader 配置

问题说明

  1. 由于react 的版本不同,观看教程时 react的配置文件无法对应,导致 less-loader的配置出现问题,而且less 版本3.0之后,在react 加载 less 文件时会报出 错误:
.bezierEasingMixin();Inline JavaScript is not enabled. Is it set in your options?
  1. 如何修改antd主题
  2. EONSPC错误

问题解决

  1. 安装 less-loader less 插件之后 配置 webpack.config.js 文件:
    将webpack.config.js中的 sass 的配置copy一份,修改为如下:
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
      },
      'less-loader',
    ),
  },
  {
    test: lessModuleRegex,
    use: getStyleLoaders(
      {
        importLoaders: 2,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
      },
      'less-loader'
    ),
  },
  1. 解决 Inline JavaScript is not enabled. Is it set in your options? 错误 并 修改 主题
    在 webpack.config.js中找到如下代码并注释
// if (preProcessor) {
    //   loaders.push({
    //     loader: require.resolve(preProcessor),
    //     options: {
    //       sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    //     },
    //   });
    // }
    // return loaders;
  1. 添加 如下代码
if (preProcessor) {
      let loader = require.resolve(preProcessor)
      if (preProcessor === "less-loader") {
        loader = {
          loader,
          options: {
            modifyVars: { //自定义主题
              'primary-color':'#f9c700',
            },
            javascriptEnabled: true,
          }
        }
      }
      loaders.push(loader);
    }
    return loaders;

你可能感兴趣的:(react,config,react)