Antd 修改主题颜色2018 最新版填坑记录

首先，让我想说的是，现在有很多的更新，网上的一些也有的没用了，

接下来让我来分享一些我的解决方法，时间：2018.12/18.

1.和网上的一样，我用的是creat-react-app创建的项目，修改主题的方式也是用的：run eject后的项目结构的webpack.config.dev.js修改

第一步：

yarn run eject

　或者

npm run eject　　

然后在目录结构就会多一个文件夹

我们要修改的webpack.config.dev.js（开发时）和webpack.config.prod.js（打包时）文件，

但是还要下载几个插件

1.下载babel-plugin-import

2.下载less和less-loader

1.npm install babel-plugin-import -s或者
yarn add babel-plugin-import

2.
npm install -s less//less-loader
npm install --save-dev less-loader less或者yarn add less//less-loaderyarn add  less-loader

　　3.类似下载第三方插件的事就不多说了进入正题。

1.打开webpack.config.dev.js

如图

先唠叨一下，网上有很多的过时了，比如修改

test: /\.(css)$/,

的，你会发现，根本没有，结构都变了

那是因为

test: /\.(css)$/,

都写成了这样

我也是被坑的很惨，我为此找了好多文档，终于总结出来了，开始

下载好之后，找到这个位置把 plugins改成如下

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

　　然后ctrl+F 在搜索栏中输入exclude 在exclude中加入/\.less$/,

最后在找到这个位置在rules中的use[]后面加入代码如图

{test: /\.less$/,//include: paths.appSrc,use: [{loader: "style-loader" // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "less-loader",// compiles Less to CSSoptions: {sourceMap: true,modifyVars: {'primary-color': '#1DA57A','link-color': '#1DA57A','border-radius-base': '2px',},javascriptEnabled: true,}}]},

　　最后重启，效果如图

如果此报错

网上的，我也有这个错误，如果没加/\.less$/,也会包这个错误

转载于:https://www.cnblogs.com/zlf888/p/10136535.html

Antd 修改主题颜色2018 最新版填坑记录相关推荐

React项目 antd 修改主题颜色
上官网
从零开始写第一个Flutter app（八）——修改主题颜色
目录从零开始写第一个Flutter app(一)--Hello World 从零开始写第一个Flutter app(二)--引用第三方包从零开始写第一个Flutter app(三)--有状态的部件 ...
Android——修改主题颜色
Android默认的主题是黑色,修改主题颜色此处以修改为白色主题为例: 1.点击File->Settings.(或者快捷键Ctrl+Alt+S) 2.点击Appearance &Beha ...
Mac Xcode opencv C++环境配置保姆级教程填坑记录 19年最新版本
网上找了很多教程,照着做都失败了,整整弄了两天两夜,终于好了.网上根本没有人遇到我的坑么?都搜不到,国外也没搜到,呜呜- 版本说明: 1.(必备)MacBook系统:macOS Catalina(版本 ...
Python美股量化交易填坑记录——13c.Vegas隧道交易机器人（实盘记录）
1.背景上一篇帖子介绍了思路调整的过程,我的目标从"消灭止损单"(越来越保守)改为"追大肉"(允许有止损单,盈利超过损失就行). Python美股量化交易填坑 ...
Python美股量化交易填坑记录——13b.Vegas隧道交易机器人（实盘记录）
1.背景上一篇帖子介绍了该算法的原理和八天的实盘记录: Python美股量化交易填坑记录--13a.Vegas隧道交易机器人_ChristopherShen的博客-CSDN博客经过八天实盘后,已经 ...
ncnn填坑记录八：将自己训练的模型打包为APK并部署到安卓端运行
上一篇:ncnn填坑记录七:examples/squeezenet.cpp代码阅读做一个分类任务,模型选取的mobilenetv3,训练好模型,并按前文依次转换为onnx.ncnn后,参考官方htt ...
ncnn填坑记录五：在安卓端运行ncnn
上一篇:ncnn填坑记录四:pytorch模型转ncnn 下一篇:ncnn填坑记录六:Android Studio打包APK 一.安装Android Studio 下载地址:https://devel ...
ncnn填坑记录一：安装protobuf、cmake和opencv
下一篇:ncnn填坑记录二:安装ncnn 一.protobuf安装 1.下载 git clone https://gitee.com/arcy/protobuf.git # 网络不好才在码云下载,建议 ...

Antd 修改主题颜色2018 最新版填坑记录

Antd 修改主题颜色2018 最新版填坑记录相关推荐

最新文章

热门文章

Antd 修改主题颜色2018 最新版 填坑记录

Antd 修改主题颜色2018 最新版 填坑记录相关推荐

最新文章

热门文章

Antd 修改主题颜色2018 最新版填坑记录

Antd 修改主题颜色2018 最新版填坑记录相关推荐