react如何添加less環境配置

Posted on by

1.安裝less

npm install less-loader less --save-dev

2.找到node_modules文件夾裡react-scripts/config/webpack.config.js

在這個下面添加less相關配置

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

3.然後往下翻代碼到下圖

 在這段代碼下面加

{
              test: lessRegex,
              exclude: sassModuleRegex,
              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'
              ),
            },

4.在src目錄下創建一個less文件，裡面寫樣式

5.引入

6.如果啟動報錯如下，就說明less-loader版本太高

 7.解決方案，修改less-loader版本，大概6.0.0就好瞭

npm install [email protected]

到此這篇關於react如何添加less環境配置的文章就介紹到這瞭,更多相關react添加less環境配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：