使用 create-react-app 脚手架搭建react项目后
1.执行命令下载less和less-loader
npm install less-loader less --save-dev
2、执行暴露出webpack 相关的配置文件
yarn eject
3.修改 config/webpack.config.js ,一共修改了三处
代码:
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
代码:
{
loader: require.resolve('less-loader'),
options: lessOptions,
},
代码:
{
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'
),
},
现在就配置成功了,但是如果你的less-loader是6.0的就会报错,它好像兼容方面有点问题,这个时候,更换为less-loader@5.0.0 重新运行就好了,执行以下命令:
yarn remove less-loader
yarn add less-loader@5.0.0
yarn start