sass 变量不跨导入共享答案

【问题标题】：sass variables not shared across importssass 变量不跨导入共享
【发布时间】：2014-12-03 21:06:40
【问题描述】：

我的 sass 文件有以下设置：

base.scss

@import "colors";
@import "forms";

_colors.scss

$gray: #ccc;

_forms.scss

form {
    background: $gray;
}

当我运行 grunt sass 构建 css 时，出现以下错误：

Running "sass:dist" (sass) task
Syntax error: Undefined variable: "$gray".
        on line xx of sass/_forms.scss
  Use --trace for backtrace.

【问题讨论】：

请向我们展示您的 Gruntfile。
我突然想到这可能是问题所在。看我的回答。

标签： sass gruntjs

【解决方案1】：

问题是我的 sass grunt 任务，我正在处理整个目录，而不仅仅是 base.scss。

这是为以后遇到相同问题的人提供的解决方法：

您想查看所有文件的更改。

    watch: {
        css: {
            files: './sass/**/*.scss',
            tasks: ['sass']
        }
    }

您只想处理base.scss，因为它包括所有其他_foo.scss 文件（这些文件将通过查看基本文件得到处理。

    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: './sass',
                src: ['base.scss'],
                dest: './public/css',
                ext: '.css'
            }]
        }
    },

【讨论】：

【解决方案2】：

如果您使用grunt-sass，则updated 忽略“_” sass 文件。从它的自述文件中：

注意：以“_”开头的文件将被忽略，即使它们与通配符模式匹配。这样做是为了匹配预期的Sass partial behaviour。

grunt-contrib-sass 在 v0.6.0 版本中引入了相同的功能（参见他们的release history）。

在您提出问题后，这两个插件都已更新。

因此，您的 grunt 任务现在可以保持原来的状态，这将使您能够拥有多个“基础”文件 - 独立的 sass 文件，它们分别编译，而不会编译部分文件。

【讨论】：