- 通过create-react-app 是默认不支持less的,所以需要自己配置
- 编译成功有className在项目中显示为undefined
打开配置
npm run eject
在项目文件根目录下可以看到config文件夹,打开其中的webpack.config.js
配置
// style files regexes
const cssRegex = /\.css\$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
在下面加上我们的less配置
// style files regexes
const cssRegex = /\.css\$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;
找到文件中cssRegex
和 sassRegex
的配置项,在同级加上以下内容即可
// Less 解析配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true
},
"less-loader"
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
"less-loader"
),
},
注意⚠️
如果你看了其他的配置方法,在代码配置规则中加入了以上内容,在运行时发现导入成功,但是className在项目中显示为undefined请加上以下两项中的一项。
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
或
modules: true,
这项加上之后,在less文件编译之后,被引用的地方className会保留自己设置的className并拼接上hash值。如下:
如果不加这项配置的话,打包出来的资源className自己也看不懂,不方便开发。