3、create-react-app新舊版中使用less和antd並修改主題顏色

時間 2019-11-30

標籤 create react app 舊版使用 antd 並修主題顏色欄目 React 简体版

原文原文鏈接

引入less

若是項目根目錄中沒有config文件夾，首先暴露出項目配置文件，項目下執行：javascript

npm run eject

若是項目是從git倉庫中pull下來的的話，必須確保本地項目與倉庫中沒有衝突，纔可以eject成功，不然命令會報錯，由於該操做是不可逆的，一旦暴露出配置文件後eject功能將被刪除。css

eject成功後項目下會多出兩個文件夾，config和scripts，咱們開發中通常只需關心config文件下的webpack.config.dev.js、webpack.config.prod.js、webpackDevServer.config.js,其餘多出來的文價不要管他：
java

而後安裝less和lessloader：node

npm install less less-loader --save-dev

修改webpack.config.dev.js和webpack.config.prod.js，兩個文件同樣的地方修改，找到配置中的module.rules下面的test: /\.css$/處的配置,須要改的地方：react

將其改成：webpack

          {
            test: /\.(css|less)$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              { loader: require.resolve('less-loader') }
            ],
          },

而後就能夠在項目中暢用less了，sass配置方法同樣，只是安裝的包不同，node-sass和sass-loader----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------git

不過如今create-react-app默認安裝版本是2.03了，其中有些改變，在新版本腳手架中css的rules.test的值被提取到外面聲明爲一個變量，並將css的rules.use一樣提取爲一個函數在外部聲明，函數接受兩個參數，第一個爲傳入css-loader的Options，第二個爲可選，就是須要添加的loader，最後返回配置後的loader數組：
github

看到這裏發現其實只是變換了寫法而已，而且新版本腳手架中已經配置了sass了，依葫蘆畫瓢，最笨的辦法就是也定義兩個關於less的變量：web

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

而後在oneOf數組最後複製sass的兩個loader配置追加到後面，將變量對應的改成上面本身聲明的變量，並將第二個參數'sass-loader'改成'less-loader'：npm

          {
            test: lessRegex,
            exclude: lessModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
          },
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'less-loader'
            ),
          },

而後從新運行便可，親測！

不要忘記兩個配置文件都要改哦！

按需引入antd組件

安裝使用很少說了直接進入正題，如何按需加載，使用須要用到的組件：

import { Button } from 'antd'

安裝按需引入所須要的插件：

npm install babel-plugin-import --save-dev

而後在package.json中babel屬性下添加：

    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }]
    ]

完整的應該是：

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

固然這個不在package.json中配置也行，在.babelrl中配置也能夠，或者在webpack.config.js中配置也能夠，可是由於要同時改dev和prod兩個文件會比較麻煩，pugins是個二維數組！！不要複製粘貼錯了哦！

修改antd默認主題顏色
這樣就實現了antd組件按需加載了，不須要再額外引入組件樣式了，可是若是要更改antd主題顏色的話，這裏這個style屬性值就不能是"css"了。必須改爲true,緣由是由於值是css時按需加載時加載的就是antd編譯後以後的css文件，要更改主題顏色是要更改less變量的，而true標識直接加載antd的less文件，注意，坑來了！！當你設爲true時，你會發編譯失敗，頁面中antd組件也會沒有樣式了，命令行拋出以下異常：

這是由於你還沒配置less-loader的配置項，在以前我複製修改的那個地方只是引入使用了less-loader,並無添加配置項，致使他就會出現這個異常，在網上找資料大概less的版本2.7.3之前不會出現這個問題，因此咱們要先給less-loader一個修改antd主題顏色的配置，在create-react-app 2.0之前的配置方法：

在最新的react腳手架版本中，上面也提到了，因新版本的配置文件中關於css的rules中的use值被提到外部聲明成了一個配置函數，函數返回該樣式文件類型所須要的loader數組，因此通過我以下修改並測試，成功修改主題顏色：

// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions,
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
        ],
      },
    },
  ];
  if (preProcessor) {
    let loader = require.resolve(preProcessor)
    if (preProcessor === "less-loader") {
      loader = {
        loader,
        options: {
          modifyVars: {
            'primary-color': '#000000',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        }
      }
    }
    loaders.push(loader);
  }
  return loaders;
};

其實也就是修改了該函數if(preProcessor)中的代碼，其餘地方並無改，固然dev和prod兩個文件一樣都要改，以保證線上代碼不會有問題，prod文件中這個if(preProcessor)中默認已經配置了一個options:

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

因此這個咱們這樣改：

  if (preProcessor) {
    let loader = {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: shouldUseSourceMap,
      },
    }
    if (preProcessor === "less-loader") {
      loader.options.modifyVars = {
        'primary-color': '#000000',
        'link-color': '#1DA57A',
        'border-radius-base': '2px',
      }
      loader.options.javascriptEnabled = true
    }
    loaders.push(loader);
  }

如今能夠開始來快樂的擼你的代碼咯。。。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------

轉載至：https://blog.csdn.net/qwe502763576/article/details/83242823