共计 2121 个字符，预计需要花费 6 分钟才能阅读完成。
描述
创建步骤和官网一直，大家可以查看官网，下面简单列举下.
创建项目
npx create-react-app my-app
cd my-app/
eject 出配置文件
npm run eject
或者
yarn eject
安装 less
less 和 less-loader 都要安装。less 是支持 less 语法的，less-loader 是 webpack 使用来编译 less 的。
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
}
解决了你的问题，请点赞和收藏给点鼓励，有问题请留言。
