在Rails 6项目中为materialize更改$primary-color。

Question

我刚刚完成了将Materialize CSS添加到我的Rails 6项目中，使用了这个伟大的指南。https:/medium.com@guilhermepejonhow-to-install-materialize-css-in-rails-6-0-0-beta2-using-webpack-347c03b7104e。

一般的风格已经更新了，一切都很好，直到我想改变一下。$primary-color sass变量。我看到了 <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包的一部分，如果我尝试导入一个scss文件的副本。https:/github.comDogfalomaterializeblobmastersasscomponents_variables.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仓库中搜索文件，然后打开它，寻找要覆盖的变量。链接1链接2