React脚手架首次创建,支持的样式文件css、sass,并不支持 .less 样式文件,因此我们在对组件样式编写时,如果没有配置 less 文件信息,我们写的 less 样式表就不会生效,下面我们开始对less 信息进行配置
1. React脚手架在默认生成时,并不会将 webpack.confing.js 的配置信息暴露出来
使用
npm run eject
&
yarn eject
命令
此前我们一定要将本地仓库的 git 代码进行提交,如果有更改后未提交的代码,会报错
遇到这样的报错信息,我们将本地仓库的代码提交后,重新运行 yarn eject 即可,命令运行成功后,本地目录会生成 config 文件夹,该文件夹内就是该项目的 webpack 所有配置信息
2. 下载 less 所需的包
使用
npm i less less-loader --save
或
yarn add less less-loader
命令
包下载完成后,我们可以在 package.json 中查看到 less 包信息
3. 在 webpack.config.js 中添加 less 配置信息
打开 config 目录下的 webpack.config.js 文件,因为我们要添加的 less 和React脚手架默认的 css、sass 都是样式文件,因此,我们在 webpack.config.js 文件中,使用 ctrl+F 全局搜索 sass或css
在这里仿照sass和css添加 less 的配置信息
const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/;
在 style files regexes 下添加完 less 的配置信息后
全局搜索 oneof ,在 sass 后添加 less 的配置信息,如下
{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'icss',},},'less-loader'),},{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {mode: 'local',getLocalIdent: getCSSModuleLocalIdent,},},'less-loader'),},
配置完成后,保存即可,再对组件添加 .less 样式,我们就可以发现 .less 样式文件已经生效,这表示我们已经配置好了