React中如何配置less文件

React配置less文件

1. 下载less插件

   npm i less less-loader -D

2. 暴露配置文件，注意：此操作不可逆

   npm run eject

3. 修改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>