less和sass的用法基本上都差不多,我个人还是比较习惯使用less,所以就在项目中配置了一个less。如果你是使用create react-app
的话,会默认配置一个sass这个玩意,只需要安装一下就可以使用了。使用yarn eject
或者npm run eject
都可以将webpack.config.js
文件暴露出来,执行完此命令在根目录下会多出config和scripts文件夹,在config文件夹下可以找到webpack.config.js
配置文件。
- 执行以上操作后,找到以下配置信息
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
- 在这个配置信息下面新增less配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
- 找到oneof关键字,在这个列表中新增less配置信息,一般react是默认有配置sass,可以将sass配置拷贝一份修改一下就可以了。
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
- 在项目中创建less文件后,引入到项目中使用,重新项目。