ant-design / antd-init

:beginner: Ant Design boilerplate generator.
816 stars 408 forks source link

自定义主题不生效 #141

Closed tvrcgo closed 7 years ago

tvrcgo commented 7 years ago

我用官方推荐的第二种方法,是自己的脚手架,建了一个 style 目录,里面建了一个 antd.less 文件

image

antd.less 文件的内容如下

@import "~antd/dist/antd.less";
@primary-color: #ff9900;

webpack 的配置如下:

image

编译过程正常。

但是,还是不生效。还有哪里有遗漏吗?

环境

tvrcgo commented 7 years ago

用了个简单的办法先实现

先建了一个自定义主题文件 style/antd-theme.js

image

module.exports = {
  '@primary-color': '#3b5998'
}

webpack 里面直接 require 这个主题文件,再 modifyVars

image

image

有效

afc163 commented 7 years ago

给个 repo 我去试试。

tvrcgo commented 7 years ago

@afc163 https://github.com/tvrcgo/lego-react-antd

afc163 commented 7 years ago

知道了,这行 webpack.config 配置 里的 style 属性去掉就行。

按照官方文档的描述-less),当你用了 @import "~antd/dist/antd.less";,也就引入了所有样式时,babel-plugin-import 里的 style 按需加载样式便失去了意义,如果还设置则会重复加载样式。

不生效的原因是 babel-plugin-import 加载的样式覆盖了 index.less 的样式。

tvrcgo commented 7 years ago

@afc163 所以我的简单解决办法其实是实现了按需加载?也好。

afc163 commented 7 years ago

对的,只是确认下不是文档的问题~

suxu commented 6 years ago

我用自带主题都无效。 设置 Layout.sider 的 theme=light 无效