create-react-app创建的项目引入less报错解决

创建步骤和官网一直，大家可以查看官网，下面简单列举下.

创建项目

1
2
3

npx create-react-app my-app

cd my-app/

eject出配置文件

1
2
3

npm run eject
或者
yarn eject

执行yarn eject时如果报错了，提示你要讲修改的文件提交到远程仓库

安装less

less和less-loader都要安装。less是支持less语法的，less-loader是webpack使用来编译less的。

1	npm install less less-loader --save

配置webpack.config.js

修改config/webpack.config.js

新增less配置变量

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;  // 新增less配置
const lessModuleRegex = /\.module\.less$/; // 新增less配置，这个其实不配置也行

增加module下面rule规则，可以copy cssRegex或者sassRegex的配置。

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,// 值是1
            modules: true, // 增加这个可以通过模块方式来访问css
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader"
    ),
    sideEffects: true
}, 
// 这个测试删了也不影响
{
    test: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
        },
        "less-loader"
    )
},
// "file" loader makes sure those assets get served by WebpackDevServer.

需要注意一下几个地方：

1.lessRegex中importLoaders的值为1

当然这个是2也能使用，但是它的值是根据lessRegex变量后面正则中匹配的loader数来决定的，比如const cssRegex = /\.css$/只是处理css一种类型的文件，那应该就是1；const sassRegex = /\.(scss|sass)$/;对应的是scss和sass两种类型，那就应该是2.

2.lessRegex的use中增加modules配置

modules可以不设置，不设置的话，less只能通过字符串名的方式使用，比如定义了一个
1
2
> .title
>

,引用时

1 2	> import './index.less' >

，使用时：
1
2
> <div className="title"></div>
>

如果需要通过模块的方式调用，则需要把modules设置成true，就可以通过styles.title方式使用了。import styles from './index.less',使用

如果你这个都配置完npm run start报如下错误

. /node_ modules/antd/es/notification/style/index. less (. /node_ _modules/css - loader/dist/cjs.js??ref--6-one0f -7-1! ./node_ modules/postcss - loader/src??
postcss! ./node_ modules/resolve-ur1- loader ??ref--6-one0f-7-3!./node_ modules/less-loader/dist/cjs. js??ref--6-one0f-7-
41./node_ modules/ antd/es/notification/sty1e/index.1ess)
// https://gi thub . com/ ant - design/ ant - motion/issues/44
. bezierEasingMixin();
Inline JavaScript is not enabled. Is it set in your options?
in E:\project\gi thub\react_ bpmnjs\node_ modules\antd\es\sty1e\color\bezierEasing.less (line 110，column 0)

可以将less-loader的版本改为5.0.0 然后在webpack.config.js中的getStyleLoaders方法中加入javascriptEnabled:true

const getStyleLoaders = (cssOptions, 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,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
            javascriptEnabled:true   //这里加上这行代码
          },
        }
      );
    }
    return loaders;
  };

最后npm run start 启动项目就可以使用less啦