React 项目配置less

[smileyby]

1

create-react-app

yarn eject

eject 命令，会提示你保存修改过的文件 执行 git add + git commit 即可

2

打开 项目名称/config/webpack.config.js，搜索 sass，将对应配置复制一份，然后修改为less

修改前后对比

// sass配置
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// 需要添加的less配置
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

// sass 配置项
{
    test: sassRegex,
        exclude: sassModuleRegex,
            use: getStyleLoaders(
                {
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'sass-loader'
            ),
                // Don't consider CSS imports dead code even if the
                // containing package claims to have no side effects.
                // Remove this when webpack adds a warning or an error for this.
                // See https://github.com/webpack/webpack/issues/6571
                sideEffects: true,
},
    // Adds support for CSS Modules, but using SASS
    // using the extension .module.scss or .module.sass
    {
        test: sassModuleRegex,
            use: getStyleLoaders(
                {
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                    modules: {
                        getLocalIdent: getCSSModuleLocalIdent,
                    },
                },
                'sass-loader'
            ),
    },
        
// 需要添加的 less 配置项
{
    test: lessRegex,
        exclude: lessModuleRegex,
            use: getStyleLoaders(
                {
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
            ),
                // Don't consider CSS imports dead code even if the
                // containing package claims to have no side effects.
                // Remove this when webpack adds a warning or an error for this.
                // See https://github.com/webpack/webpack/issues/6571
                sideEffects: true,
},
    // Adds support for CSS Modules, but using SASS
    // using the extension .module.scss or .module.sass
    {
        test: lessModuleRegex,
            use: getStyleLoaders(
                {
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                    modules: {
                        getLocalIdent: getCSSModuleLocalIdent,
                    },
                },
                'less-loader'
            ),
    },

3

安装 less less-loader

运行 npm run start ,过程中如果报错：TypeError: this.getOptions is not a function

问题原因：less-loader 版本过高不兼容 getOptions 方法，降低版本即可

解决办法：

npm uninstall less-loader
npm install npm install less-loader@5.0.0

4

完成以上步骤后，在页面中添加less样式即可正常展示