node.js - 无法使用自定义 Materialise Sass 文件和 GruntJs 覆盖 node_modules 中的 Sass 变量

Question

我最近开始使用 Materialise，因为我想使用除 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 和 Materialize 执行此操作时，它会继续使用首先设置的变量。它不使用我自己的变量文件中设置的变量，该文件定义具有不同颜色的相同变量。

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

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他们如何导入组件。