1. 程式人生 > 實用技巧 >react-create-app腳手架自定義新增less支援

react-create-app腳手架自定義新增less支援

需要自己配置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檔案引用了