react学习-引入less

使用create-react-app脚手架搭建一个项目，并在其中引入less

命令行输入

安装less和less-loader

配置webpack.config.js

第一种方式

第二种配置方式

要注意一个小细节

---

使用create-react-app脚手架搭建一个项目，并在其中引入less

参考大佬的两种方法 都可以实现，其中遇到了坑，记录一下

搭建好脚手架以后，打开隐藏的配置文件

命令行输入

npm run eject
或者
yarn eject

 就会在当前目录出现一个config文件夹

安装less和less-loader

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: sassModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
        },
        "sass-loader"
    )
}, 
{
    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只能通过字符串名的方式使用，比如定义了一个 .title,引用时 import './index.less'，使用时： <div className="title"></div>

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

 

第二种配置方式

可以不增加新的变量，把css的配置包含less

const cssRegex = /\.(css|less)$/; //增加less
const cssModuleRegex = /\.module\.(css|less)$/;

{
    test: cssRegex,
    exclude: cssModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,// 改成2
            modules: true,//使用模块方式访问样式
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader" //增加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
}

这两种方式都可以成功

要注意一个小细节

在js文件中引入less文件，记得把后缀加上

例如

import "./App.less";