如何构造scss？

Question

我一直非常沮丧，使风格的工作，因为我想在角-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中使用这个标头。

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

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

但是，main.scss是否已经导入了variables.scss，并且在header.component.ts加载时已经加载了？我不明白它是怎么工作的！

我想要做的就是先加载variables.scss, mixins.scss, buttons.scss，并能够在那些我想要的地方使用变量和混合器。我该怎么做？

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

Answer 1

我必须在我制作的每个组件中导入variables.scss、mixins.scss、buttons.scss吗？

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

检查此问题：https://github.com/sass/sass/issues/1094用于扩展类，您可以使用sillent类https://csswizardry.com/2014/01/extending-silent-classes-in-sass/