React 環境 webpack less 配置 及 javascriptEnabled 解決方法
阿新 • • 發佈:2022-06-06
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 } }