css - 导入Materialize源码时Sass CompileError : Sass map "isn' t a valid CSS value"

Question

我正在尝试编写一个 SCSS 文件，dashboard.scss，其中包含一个导入

@import "../../../lucy_web/static/stylesheets/mixins";

其中 _mixins.scss 包含 Materialise v1.0.0beta 源代码的导入:

@import "vendor/materialize_v1";

但是，当我添加这个导入时，我得到一个 CompileError，即 Sass map $base“不是有效的 CSS 值”:

CompileError at /dashboard/experts
Error: ("base": #009688, "lighten-5": #e0f2f1, "lighten-4": #b2dfdb, "lighten-3": #80cbc4, "lighten-2": #4db6ac, "lighten-1": #26a69a, "darken-1": #00897b, "darken-2": #00796b, "darken-3": #00695c, "darken-4": #004d40, "accent-1": #a7ffeb, "accent-2": #64ffda, "accent-3": #1de9b6, "accent-4": #00bfa5) isn't a valid CSS value.
        on line 152 of lucy_web/static/stylesheets/vendor/components/_color-variables.scss
>> $teal: (
   -------^

我正在使用 Sass 的“Bleeding Edge”版本，所以我希望它能工作:

(venv) Kurts-MacBook-Pro-2:stylesheets kurtpeek$ sass --version
Sass 3.5.5 (Bleeding Edge

知道为什么 SCSS 没有编译吗？

Answer 1

我认为这是由于 https://github.com/mkhairi/materialize-sass/issues/81 中描述的“名称冲突”造成的. SCSS 实际上还包含一些“遗留”代码，这些代码导入旧版本 Materialise 的各个组件:

@import "../../../lucy_web/static/stylesheets/partials/colors";
@import "../../../lucy_web/static/stylesheets/partials/mixins";
@import "../../../lucy_web/static/stylesheets/partials/variables";

'colors' SCSS 文件还定义了 $base，显然重新定义会导致 CompileError。我通过将这个特定的 mixin 移动到当前目录中单独的 _mixins.scss 来解决这个问题，而不导入 Materialize 源代码，并像这样简化导入:

@import "mixins";