在Rails 6项目中更改Materialize的$primary-color

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 sass 变量时，我发现

的样式仍为默认的红色，而我的 app/javascript/stylesheets/application.scss 看起来像这样：

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

我以前在Rails 5项目中使用gem 'materialize-sass'非常成功，但是对于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 

有没有关于如何在Rails 6项目中更改sass变量，比如$primary-color来覆盖Materialize CSS的想法？ :)

- patdev86

Answer 1

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

始终考虑在GitHub存储库中搜索文件，然后打开它并查找要覆盖的变量 link1 link2

- Louai Zaiter