本来只是想实现一个less的模块化功能,结果网上查到很多方法说要react-scripts eject!
想着我也没折腾过webpack.config.js也就试试,然后在那文件下增加配置:
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
... // 位于 sassModuleRegex 之后
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects: true,
},
加完以后发现,单纯引用less可以,但是模块化不行?!
又找了半天,发现之前的“攻略”里缺了个modules: true,。加完后确实可以模块化引import styles from './index.less';,但是原本的全局配置类又失效了!
加上对eject出来一堆完全用不到的东西越看越不顺眼,干脆推倒重来。
本来我项目用的就是react-app-rewired,所以在这基础上引less,然后找到的方法是修改config-overrides.js:
const {override, addLessLoader} =require('customize-cra');
module.exports = override(
// 使用less-loader对源码重的less的变量进行重新制定
addLessLoader({
javascriptEnabled: true,
modifyVars:{'@primary-color':'#1DA57A'},
})
);
其实这样写不算错,问题在于版本不对,这已经是旧版本的写法了,会报错:
Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. (注1)
然后网络上说是版本问题,要升版本或降版本,我也就在这折腾了一段时间。因为package里没主动安postcss,还遇到了一串连环错:
PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
PostCSS plugin postcss-normalize requires PostCSS 8.
……
后来注意到(注1)下面的报错变成了:
options has an unknown property ‘modifyVars’. These properties are valid:
object { lessOptions?, prependData?, appendData?, sourceMap? }
这明显就是配置格式不对嘛,所以搜新版本addLessLoader应该怎么写,于是config-overrides.js改为:
const { override, addLessLoader } = require("customize-cra");
const path = require("path");
module.exports = override(
// 使用less-loader对源码重的less的变量进行重新制定
addLessLoader({
lessOptions: {
javascriptEnabled: true,
cssModules: {
localIdentName: "[path][name]__[local]--[hash:base64:5]",
}
},
}),
);
结果这样还是不行?!途中又试了adjustStyleLoaders、(config) => { return config}等就不提了。
最后发现,其实是模块化默认要写成xxx.module.less的后缀,就缺改名而已。终于解决了又能全局定class,又能模块化styles,还省得看eject拉出来的一堆东西。
P.S.本来以为adjustStyleLoaders这东西没有用,删掉也不影响。但重新建了个项目发现还得加:
const { override, addLessLoader, adjustStyleLoaders, addWebpackAlias } = require("customize-cra");
const path = require("path");
module.exports = override(
// 使用less-loader对源码重的less的变量进行重新制定
addLessLoader({
lessOptions: {
javascriptEnabled: true,
cssModules: {
localIdentName: "[path][name]__[local]--[hash:base64:5]",
}
},
}),
adjustStyleLoaders(({ use: [, , postcss] }) => {
const postcssOptions = postcss.options;
postcss.options = { postcssOptions };
}),
//增加路径别名的处理
addWebpackAlias({
'@': path.resolve('./src')
}),
);