在同级导入文件中扩展类不起作用答案

【问题标题】：Extending class in sibling imported file not working在同级导入文件中扩展类不起作用
【发布时间】：2017-11-29 15:59:57
【问题描述】：

我正在尝试使用 Sass 的 @extend 功能来减少重复代码，但由于某种原因，它会引发错误。示例代码如下。

在_title.scss:

.title { font-family: "Open Sans"; }

在_user-content.scss

.user-content { h1, h2, h3, h4, h5, h6 { @extend .title; } }

在screen.scss:

@import "_title";
@import "_user-content";

运行gulp-sass时：

[13:15:02] gulp-notify: [Gulp] src/assets/styles/base/user-content/_user-content.scss
Error: ".user-content h1" failed to @extend ".title".
       The selector ".title" was not found.
       Use "@extend .title !optional" if the extend should be able to fail.
        on line 1 of src/assets/styles/base/user-content/_user-content.scss
>> .user-content { h1, h2, h3, h4, h5, h6 { @extend .title; } }
   -----------------------------------------^

这对我来说似乎是正确的，但它抛出了一个错误。我做错了什么？

【问题讨论】：

标签： sass extend gulp-sass node-sass

【解决方案1】：

我认为您需要将“_title”导入“_user-content”。我不确定您是否可以从另一个导入的文件访问导入的类。

【讨论】：

【解决方案2】：

好吧，我只是傻了。我忘记了我有两个 SCSS 文件，一个 screen.scss 和一个 editor.scss。导入在 screen.scss 中运行良好，但在 editor.scss 中失败，因为我没有将我试图扩展的类导入到 editor.scss。

【讨论】：