React 环境 webpack less 配置 及 javascriptEnabled 解决方法
create-react-app 创建React 默认不支持less 且webpack配置默认不可见 需要手动配置
第一步:打开下载webpack React项目配置文件
注意:必须是全新的项目或者已经提交的项目
运行完成后项目根目录会增加 config 和 scripts目录
npm run eject
第二步: 安装less解析依赖
npm i less less-loader --save-dev
第三步: 修改配置文件 打开config目录下webpack.config.js文件 搜索sassModuleRegex 在下一行新增变量 lessRegex和lessModuleRegex
const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;
第四步:搜索getStyleLoaders方法 增加参数 preProcessorOptions 及修改方法体
// 修改前 const getStyleLoaders = (cssOptions, preProcessor) { ... if (preProcessor) { loaders.push( ... { loader: require.resolve(preProcessor), options: { sourceMap: true, } } ); } return loaders; } // 修改后 const getStyleLoaders = (cssOptions, preProcessor, preProcessorOptions = { sourceMap: true, }) { ... if (preProcessor) { loaders.push( ... { loader: require.resolve(preProcessor), options: preProcessorOptions } ); } ... }
第四步:搜索test: sassModuleRegex
{ test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { mode: 'local', getLocalIdent: getCSSModuleLocalIdent, }, }, 'sass-loader' ), }, // 增加的内容 { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment }, 'less-loader', { sourceMap: true, lessOptions: { javascriptEnabled: true // less javascriptEnabled参数 } } ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, } }, 'less-loader', { sourceMap: true, lessOptions: { javascriptEnabled: true // less javascriptEnabled参数 } } ), },
注意:less-loader的版本不同,配置不同。 V6.0.0之前 options: { javascriptEnabled: true } V6.0.0之后 options: { lessOptions: { javascriptEnabled: true } }