成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Eminjannn / 2717人閱讀

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

為了在react中使用antd以及它的主題更改，需要在項(xiàng)目中 yarn eject 暴露出webpack文件進(jìn)行改造
本答案是在日期當(dāng)時(shí)最新的create-react-app上的webpack版本
less-loader的配置 安裝less less-loader兩個(gè)包 
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"),
          },
設(shè)置后可以新建less文件用簡(jiǎn)單樣式去檢測(cè)是否生效，要記得重啟項(xiàng)目。
Babel-plugin-import(antd的按需加載設(shè)置) 安裝插件 
yarn add babel-plugin-import
修改package.json(或新建文件.babellrc進(jìn)行編輯，但兩者只能存一種) 
"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",{"libraryName":"antd","style":"css"}
      ]
    ]
  }
根據(jù)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的顏色，再重啟項(xiàng)目即可更改主題顏色

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109960.html

相關(guān)文章

  • 通過create-react-app從零搭建react環(huán)境

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

    Cympros 評(píng)論0 收藏0

  • 通過create-react-app從零搭建react環(huán)境

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

    CoyPan 評(píng)論0 收藏0

  • Create-react-app+Antd+Less配置

    摘要：說明官方腳手架工具用于快速創(chuàng)建應(yīng)用，但依舊有局限性，我們根據(jù)項(xiàng)目需求需要對(duì)的配置進(jìn)行修改。這里針對(duì)引入的兩種配置方式進(jìn)行配置。方案一一個(gè)對(duì)進(jìn)行自定義配置的社區(qū)解決方案。安裝修改啟動(dòng)項(xiàng)在項(xiàng)目根目錄創(chuàng)建一個(gè)用于修改默認(rèn)配置。 說明 React官方腳手架工具Create-react-app 用于快速創(chuàng)建React應(yīng)用，但依舊有局限性，我們根據(jù)項(xiàng)目需求需要對(duì)Create-react-app的配...

    solocoder 評(píng)論0 收藏0

  • 采用React+Ant Design組件化開發(fā)前端界面(一)

    摘要：基礎(chǔ)知識(shí)使用腳手架創(chuàng)建項(xiàng)目并啟動(dòng)安裝腳手架使用腳手架創(chuàng)建項(xiàng)目為項(xiàng)目名。否則可能導(dǎo)致項(xiàng)目發(fā)布上線后，報(bào)錯(cuò)無(wú)法執(zhí)行。安裝測(cè)試使用注意默認(rèn)情況下安裝的需要引入才會(huì)生效樣式，但很多時(shí)候，我們只是使用了部分組件，引入整個(gè)樣式文件，有些得不償失。 showImg(http://upload-images.jianshu.io/upload_images/2774022-8d65190f1b972c...

    cppprimer 評(píng)論0 收藏0

  • 學(xué)習(xí)從零開始搭建React腳手架

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

    cod7ce 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<