create-react-app创建的react项目怎么引入less文件

React

2020-04-02

14

0

通过create-react-app创建的项目并没有暴露出webpack的相关配置,所以我们要通过运行npm run eject来显示webpack相关文件。项目中会多出一个config目录,它里面就包含了webpack的相关配置文件。

1. 显示webpack配置文件 

npm run eject

如果运行npm run eject报错,先运行 git add .  和 git commint -m 'app init' 这两个命令,在运行npm run eject命令即可.

2. 安装less和less-loader

npm install less less-loader -S-D

3. 配置webpack.config.js文件

// config/webpack.config.js

// 添加 less 解析规则,可以仿照项目对sass的支持
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// 再在rules数组中添加下面一段代码
// Less 解析配置
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        },
        'less-loader'
    ),
    sideEffects: true,
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    )
},

 

 

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01