react-create-app腳手架自定義新增less支援
阿新 • • 發佈:2020-08-18
需要自己配置webpackconfig
開啟資料夾根目錄命令列輸入npm run eject
安裝下載:cnpm run less less-loader -D (別忘了less-loader)
專案中會多一個資料夾 config=》找到webpack.config.js (網上說更改兩個檔案配置 dev和pro.configjs老版本方式,太麻煩這裡不推薦)
直接更改webpack.config.js 即可
1:新增:(大概在頭不幾十行內)
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const cssRegex = /\.css$/; const cssModuleRegex= /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; //新加less const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;
2:新增lessregex規則:
//新增less { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders:3, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this.// See https://github.com/webpack/webpack/issues/6571 sideEffects: true, },
3:新增ModuleRegex規則:
// 新增less moduleregex { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction && shouldUseSourceMap, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'less-loader' ), },
說明:
新增規則中一般比較靠後面大概在配置檔案四五百行的樣子:怕寫錯的話可以找到sass的更改規則(一般都會預設有sass配置)複製一份放下面找到sass處改成less即可
最後別忘了重新啟動程式(更改webpack需要重新啟動)
npm start
然後就可以正常建立less檔案引用了