React配置less文件
- 下载less插件
npm i less less-loader -D
- 暴露配置文件,注意:此操作不可逆
npm run eject
- 修改config/webpack.config.js
写在style files regexes中
//引入less文件
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.less$/;
在sassRegex下面(直接搜索即可),最好直接复制sass文件,如果写在file下面可能还是没法用
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
modules:true, //我是这里出不来,又新增了这条
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
modules:true,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
重新执行 npm start
试过以后还是不行,发现报错
./src/hooks-setting/styles/test.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/postcss-loader/src??postcss!./src/styles/test.less)
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'preProcessor'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
只需要将webpack.config.js文件中的
{
loader: require.resolve(‘css-loader’),
options: cssOptions, 这句改成
options: { modules: { localIdentName: “[name][local]_[hash:base64:5]” } }
},
好了,搞定!
侵删!!!菜鸟一个,还请各位大佬多指教!
更新:注意,这时候引入less的方法就应该变成
import style from './style.less'
将原来的ClassName换成大括号:
<div className={styleMedia.test}>
<h1>测试</h1>
</div>