javascript - Angular-Cli - 如何构建 scss？

Question

让样式在 Angular-Cli 中按照我想要的方式工作让我感到非常沮丧。我只是不明白您应该如何构建它。

这是我的样式文件夹，

- styles
 -- components
 --- buttons.scss
 -- partials
 --- mixins.scss
 --- variables.scss
 -- main.scss
 -- styles.scss (default file)

在我的 main.scss 文件中，我已经导入了整个应用程序所需的所有文件。

@import './components/buttons.scss';
@import './partials/variables.scss';
@import './partials/mixins.scss';

在我的 app.component.ts 中，

@Component({
    selector: 'app-root',
    templateUrl: './app.html',
    styleUrls: [ '../styles/main.scss' ],
})

当我加载应用程序时，一切正常。伟大的!然后我添加一个新组件 header.component.ts 并将 header.scss 添加到我的样式文件夹中。

-styles
 -- header
 --- header.scss

在 header.component.ts 中我设置了样式表，

@Component({
        selector: 'app-header',
        templateUrl: './header.html',
        styleUrls: [ '../styles/header/header.scss' ],
    })

我在 app.html 中使用了这个 header 。

<div>
<app-header></app-header>
</div>

现在我的浏览器因缺少变量而抛出各种错误，因为 header.scss 引用了 /partials/variables.scss 中的变量。

但是导入 variables.scss 的 main.scss 不是已经在 header.component.ts 加载时加载了吗？我不明白它是如何工作的!

我想要做的就是首先加载 variables.scss、mixins.scss、buttons.scss，然后能够在任何我想要的地方使用变量和混合。我怎么做？

编辑:我是否必须在我制作的每个组件中导入 variables.scss、mixins.scss、buttons.scss？

Answer 1

Do I have to import variables.scss, mixins.scss, buttons.scss in every component I make?

是的，当你想在 header.scss 中使用例如变量时，你需要导入它们但是请注意在类中导入定义的样式，因为当您导入类两次时，它会两次添加到您的输出样式中..

检查这个问题:https://github.com/sass/sass/issues/1094对于扩展类，您可以使用静默类 https://csswizardry.com/2014/01/extending-silent-classes-in-sass/