css - 更改 $primary-color 以在 Rails 6 元素中实现

Question

我刚刚使用这个很棒的指南将 Materialize CSS 添加到我的 Rails 6 元素: https://medium.com/@guilhermepejon/how-to-install-materialize-css-in-rails-6-0-0-beta2-using-webpack-347c03b7104e

一般样式已更新，一切都很好，直到我想更改 $primary-color萨斯变量。我看到 <nav>当我的 app/javascript/stylesheets/application.scss 被设置为默认的红色时看起来像这样:

$primary-color: color("blue", "lighten-2") !default;
@import 'materialize-css/dist/css/materialize';

我用过gem 'materialize-sass'过去在 Rails 5 元素中取得了巨大成功，但 Rails 6 对我来说是新的。

随着我成功使用 gem 我的 app/assets/stylesheets/application.scss看起来像这样:

@import "materialize/components/color-variables";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';

materialize/components/color-variables不是 webpack 包的一部分，如果我尝试导入 https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss 的 scss 文件副本然后我收到这样的错误，这似乎表明与 materialize 包的 JS 断开连接。

$primary-color-light: lighten($primary-color, 15%) !default;
                     ^
      Argument `$color` of `lighten($color, $amount)` must be a color
      in 

关于如何更改 sass 变量的任何想法，如 $primary-color在 Rails 6 元素中重写 Materialize CSS？ :)

Answer 1

实际上您只是在导入颜色。您还应该通过在 CSS 顶部添加此代码来导入变量 @import "materialize-css/sass/components/_color-variables"; @import "materialize-css/sass/components/_variables";

总是想到在 github 存储库中搜索文件，然后打开它并寻找要覆盖的变量 link1 link2