无法使用自定义 Materialize Sass 文件和 GruntJs 覆盖 node_modules 中的 Sass 变量

Question

我最近开始使用 Materialize，因为我想使用 Bootstrap 以外的东西。

我习惯用LESS，用Grunt编译，设置的方式是这样的：

grunt 文件将导入一个名为 custom.less 的文件。

此文件将导入 bootstrap-import.less，它将从我使用 NPM materialize-css 获得的 node_modules 文件夹中导入所有 Bootstrap LESS 文件。

之后，它将在我的自定义文件夹中导入相同的文件结构，我可以在其中覆盖变量并对原始引导 CSS 进行自定义更改。

因此，使用 LESS，我可以导入原始 variables.less 文件，然后，我可以包含我自己的 variables.less 文件，我可以在其中覆盖例如@brand-primary color。

但是当我尝试使用 SASS 执行此操作并实现时，它会继续使用首先设置的变量。它不使用在我自己的变量文件中设置的变量，该文件定义了具有不同颜色的相同变量。

如果这没有意义，请告诉我？

MyWebsite/
  |--node_modules
  |  |--materialize-css
  |     |--sass
  |        |--components/all sass files here
  |--src/
  |  |--sass/components/my custom sass files
  |
  |--gruntfile.js // Imports sass files from node modules
  |               // Imports my custom sass files including variables.sass
  |               // to override the variables file in node_modules
  |
  |
  |--index.html

Answer 1

我会从你的 sass 文件中导入具体化。

所以在你的src/sass/main.scss

// Variables;
@import "../../node_modules/materialize-css/sass/componenets/variables";

// Change your variables here
$primary-color: blue;

// Reset
@import "../../node_modules/materialize-css/sass/componenets/normalize";

// components
@import "../../node_modules/materialize-css/sass/componenets/global";

看看materialize.scss 他们是如何导入他们的组件的。