一. 创建React 工程
npx create-react-app my-app
二.添加less和less-loader 两个依赖库
cnpm install less@3.9.0 --save
cnpm install less-loader@4.1.0 --save
注意:
如果步骤3 在步骤2前先执行,则需要【删除】项目中的package-lock.json后, 重新执行步骤2即可。
三. 弹出配置文件以便自定义项目配置
npm run eject
eject运行报错
解决方式:
git init
git add .
git commit -m 'init'
npm run eject
项目里也多了一个config文件夹:
成功!
四. 打开config/webpack.config.js
文件,开始配置工作
修改style files regexes
(样式文件正则)
参照 sass 配置 less 的样式文件正则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
无.修改getStyleLoaders
函数,并添加如下代码
同样,参照css-loader
节点,添加less-loader
节点
{
loader: require.resolve('less-loader'),
options: lessOptions,
},
六.模仿代码中提供的sassRegex代码,添加如下代码
// Adds support for LESS Modules, but using LESS
// less start
{
test: lessRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
}, // less end;
七、在exclude属性中增加 /\.(css|less)$/
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/,/\.(css|less)$/,],
八、第二种方式
// 在module中做了三处修改
// 第一处是找到 `test: /\.css$/` 将其改为 `test: /\.(css|less)$/`
// 第二处是增加 `less-loader`的配置
// 第三处是在exclude属性中增加 `/\.(css|less)$/`
// 具体修改如下
module: {
...
{
// test: /\.css$/ 第一处
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
...
// 第二处
{
loader: require.resolve('less-loader')
}
]
},
{
exclude: [
/\.(js|jsx|mjs)$/,
/\.html$/,
/\.json$/,
// 第三处
/\.(css|less)$/,
]
}
}