自定义主题颜色不生效

[beautycss]

问题描述 我使用官网的主题生成器生成了一个绿色主题，把scss样式和文件按照文档引用进去，首页和里面页面的按钮颜色都是蓝色不生效，另外一个“我的”页面却是可以的。 研究两天了，也看过issue了，项目和微信开发者工具都重启过了，也不行，用的版本都是挺新的。

复现步骤

app.js

...
import './custom-variables.scss';
import './app.scss';
...

custom-variables.scss

/* Custom Theme */
$color-brand: #00b38a;
$color-brand-light: #40c6a7;
$color-brand-dark: #008f6e;

@import "~taro-ui/dist/style/index.scss";

app.scss

/* reset */
image {
  max-width: 100%;
}

/* page */
page {
  background-color: #f6f6f6;
  padding: .512rem 0;
}

.container {
  padding: 0 1rem;
}

期望行为 蓝色按钮都变为绿色。

报错信息 “首页”还有“编辑“和”查看“页面进去的按钮都是蓝色的，就“我的”页面按钮是绿色的。

系统信息 👽 Taro v1.3.22

Taro CLI 1.3.22 environment info: System: OS: macOS 10.15.1 Shell: 5.7.1 - /bin/zsh Binaries: Node: 9.6.0 - ~/.nvm/versions/node/v9.6.0/bin/node npm: 5.6.0 - ~/.nvm/versions/node/v9.6.0/bin/npm npmPackages: @tarojs/async-await: ^1.3.20 => 1.3.20 @tarojs/components: 1.3.20 => 1.3.20 @tarojs/plugin-babel: 1.3.20 => 1.3.20 @tarojs/plugin-csso: 1.3.20 => 1.3.20 @tarojs/plugin-sass: 1.3.20 => 1.3.20 @tarojs/plugin-uglifyjs: 1.3.20 => 1.3.20 @tarojs/redux: ^1.3.20 => 1.3.20 @tarojs/redux-h5: ^1.3.20 => 1.3.20 @tarojs/router: 1.3.20 => 1.3.20 @tarojs/taro: 1.3.20 => 1.3.20 @tarojs/taro-alipay: 1.3.20 => 1.3.20 @tarojs/taro-h5: 1.3.20 => 1.3.20 @tarojs/taro-qq: 1.3.20 => 1.3.20 @tarojs/taro-quickapp: 1.3.20 => 1.3.20 @tarojs/taro-swan: 1.3.20 => 1.3.20 @tarojs/taro-tt: 1.3.20 => 1.3.20 @tarojs/taro-weapp: 1.3.20 => 1.3.20 @tarojs/webpack-runner: 1.3.20 => 1.3.20 eslint-config-taro: 1.3.20 => 1.3.20 eslint-plugin-taro: 1.3.20 => 1.3.20 nerv-devtools: ^1.5.0 => 1.5.0 nervjs: ^1.5.1 => 1.5.1 stylelint-config-taro-rn: 1.3.20 => 1.3.20 stylelint-taro-rn: 1.3.20 => 1.3.20

• Taro 版本：1.3.20
• Taro UI 版本：2.2.3
• 报错平台：微信小程序

补充信息 暂无。

[taro-ui-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[C1erman]

你好，请教一下这个问题你解决了么？

[beautycss]

你好，请教一下这个问题你解决了么？

没有呢，自己在全局样式里覆盖的。

[C1erman]

+1，目前的解决方法就是查看具体类名，自己写样式后覆盖。 （用Taro两周赶了一个小程序出来，感觉还是写原生的比较好）

[Midas-Li]

我也遇到同样问题，不过算是解决了： app.scss

$color-text-base: skyblue ; // 文字的基本色
@import "~taro-ui/dist/style/index";

Login.tsx <AtButton >AtButton</AtButton>

主要原因不是Button类，而是AtButton。而且这办法首时编译比较慢和卡。 而Button类的确要用楼上的办法。在调试时看到用的是什么类名，就写css覆盖即可。 总言之，自定义主题，团队好象未完全做好，但是关系并不大，因为自己要做处理也非常简单，上面办法写css放到全局， 再扩展也方便。

另外发现，如果app.scss的代码是： @import "~taro-ui/dist/style/components/button.scss"; 这样就会快很多。