1. 场景
使用create-react-app
脚手架创建的项目引入less
文件,没有显示报错信息,但是不生效
2. 解决
2.1 安装less
npm install less less-loader --save
注:如果页面显示不出来,报一大堆错,很有可能是因为他们版本的问题。
我使用的版本:
“less”: “^4.1.3”,
“less-loader”: “^5.0.0”,
2.2 拉取项目的配置文件
使用create-react-app
脚手架创建的项目默认不显示config目录,执行npm run eject
拉取
出现如图所示的错误:
原因:修改项目文件后没有存储到本地库,按下图操作即可
git add .
git commit -m "配置less"
- 执行
npm run eject
- 此时项目中新增了
config
和scripts
两个文件夹
2.3 修改配置文件config/webpack.config.js
2.3.1 搜索sassModuleRegex ,添加代码
//在这里添加less正则
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;
2.3.2 搜索 getStyleLoaders,添加代码
{
loader: require.resolve('less-loader'),
options: lessOptions,
},
2.3.3 搜索 sass-loader ,添加代码
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
2.4 重新启动项目
可以看到less文件的样式生效了