antd自定義樣式主題

react新的目錄結構（2018.12.30 11:48下載的模板）

這裏的react版本比2018.12.25號之前的項目結構有所變化

怎麼使用react安裝自定義樣式

antd [email protected] less-loader babel-plugin-import 必須安裝，antd就是用less寫的

yarn add antd [email protected] less-loader babel-plugin-import

這裏的less必須是2.7.3以下的版本

#* 0 找到這個文件

此版本的項目已經發生很大的變化，css和sass自動安裝，但要使用sass得安裝sass-loader
看一下現在的loader怎麼展示的

解決方案

#* 1： ctrl + f 搜一下plugins

在plugins裏邊加一個 ,不能加在其他位置,負責就報錯

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

#* 3： 然後ctrl+f 搜索 exclude 在exclude中加入/.less$/, 像下圖這樣

#* 4： 找到這個位置在rules中的use[] 後面加入代碼見下圖

{
          test: /\.less$/,
          use: [{
            loader: "style-loader"
          }, {
            loader: "css-loader"
          }, {
            loader: "less-loader",
            options: {
              sourceMap: true,
              modifyVars: {
                'primary-color': '#1DA57A',
                'link-color': '#1DA57A',
                'border-radius-base': '2px',
              },
              javascriptEnabled: true,
            }
          }]
        },

按照antd的規則修改樣式就行
鏈接: antd自定義樣式修改規則.

#*6： 重啓服務，yarn start [這是輸入框的樣式已經修改了]

不需要手動引入任何的 .css或者.less文件，重啓就行

鏈接: 這篇文章:（#*3 and #*4）借鑑@錢鋒這位童鞋，如有侵權，聯繫刪除

聯繫方式 QQ: 1733813240 或 [email protected]