1、下载
cnpm install --save less less-loader
2、在node-modules/react-scripts/config/webpack.config.js中
或者npm run eject,在弹出的config中的webpack.config.js中修改
(1)大概61行后,sass匹配后面放置less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
(2)ctrl+f搜索sassRegex,复制一份sassRegex配置,将sass内容修改成less
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'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,
},
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'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,
},
(3)ctrl+f搜索sassModuleRegex,复制一份sassModuleRegex配置,将sass内容修改成less
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
3、重启项目
react 配置less
最新推荐文章于 2023-07-04 09:13:03 发布