使用less-loader與antd按需加載(babel-plugin-import)的坑

Eminjannn 發布于2019-08-26 14:00 / 2701人閱讀

摘要：的按需加載設置安裝插件修改或新建文件進行編輯，但兩者只能存一種根據配置更改主題顏色在中找到原配置注釋后更改為定義全局樣式配置自定義主題只需修改的顏色，再重啟項目即可更改主題顏色

為了在react中使用antd以及它的主題更改，需要在項目中 yarn eject 暴露出webpack文件進行改造

本答案是在日期當時最新的create-react-app上的webpack版本

less-loader的配置 安裝less less-loader兩個包

yarn add less less-loader

//配置less的變量
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;


 //less配置(模仿css的配置改寫)
                       {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
              }, "less-loader"),
          },
          {
              test: lessModuleRegex,
              use: getStyleLoaders({
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
              },"less-loader"),
          },

設置后可以新建less文件用簡單樣式去檢測是否生效，要記得重啟項目。

Babel-plugin-import(antd的按需加載設置) 安裝插件

yarn add babel-plugin-import

修改package.json(或新建文件.babellrc進行編輯，但兩者只能存一種)

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",{"libraryName":"antd","style":"css"}
      ]
    ]
  }

根據webpack配置更改antd主題顏色 在webpack.config.js中找到preProcessor

    //原配置

    if (preProcessor) {
      loaders.push({
        loader: require.resolve(preProcessor),
        options: {
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      });
    }

注釋后更改為

    /**
     * 定義全局樣式配置
     */
    if (preProcessor) {
      let loader = require.resolve(preProcessor)
      if(preProcessor === "less-loader") {
        loader = {
          loader,
          options: {
            modifyVars: {
              //自定義主題
              "primary-color": "#1890ff",
            },
            javascriptEnabled: true,
          }
        }
      }
      loaders.push(loader);
    }
    return loaders;
  };

只需修改primary-color的顏色，再重啟項目即可更改主題顏色

GPU云服務器云服務器按需加載按需加載javascript webpack按需加載執行與加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109960.html

通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

Cympros 2019-08-02 16:02 評論0 收藏0
通過create-react-app從零搭建react環境

摘要：通過文件可以對圖標名稱等信息進行配置。注意，注冊的只在生產環境中生效，并且該功能只有在下才能有效果該文件是過濾文件配置該文件是描述文件定義了項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。一、快速開始：全局安裝腳手架： $ npm install -g create-react-app 通過腳手架搭建項目： $ create-react-app 開始項目： ...

CoyPan 2019-08-22 18:05 評論0 收藏0
Create-react-app+Antd+Less配置

摘要：說明官方腳手架工具用于快速創建應用，但依舊有局限性，我們根據項目需求需要對的配置進行修改。這里針對引入的兩種配置方式進行配置。方案一一個對進行自定義配置的社區解決方案。安裝修改啟動項在項目根目錄創建一個用于修改默認配置。說明 React官方腳手架工具Create-react-app 用于快速創建React應用，但依舊有局限性，我們根據項目需求需要對Create-react-app的配...

solocoder 2019-08-22 17:10 評論0 收藏0
采用React+Ant Design組件化開發前端界面(一)

摘要：基礎知識使用腳手架創建項目并啟動安裝腳手架使用腳手架創建項目為項目名。否則可能導致項目發布上線后，報錯無法執行。安裝測試使用注意默認情況下安裝的需要引入才會生效樣式，但很多時候，我們只是使用了部分組件，引入整個樣式文件，有些得不償失。 showImg(http://upload-images.jianshu.io/upload_images/2774022-8d65190f1b972c...

cppprimer 2019-08-30 15:54 評論0 收藏0
學習從零開始搭建React腳手架

摘要：寫在前面準備學習一下和相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建全家桶框架教程步驟上都差不多第一步，依賴總覽完成到我現在半成品的過程中，目前完成開發模式的相關操作，添加了按需加載的地步。寫在前面準備學習一下react和webpack相關的東西，官方的腳手架看起來太繁瑣，所以打算自己來搭建一個，參考了這個文檔從零搭建React全家桶框架教程;...

cod7ce 2019-08-23 11:25 評論0 收藏0