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内使用此标题。

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

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

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

我想要做的就是先加载variables.scss, mixins.scss, buttons.scss，然后在我想要的地方使用变量和mixins。我怎么做？

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

Answer 1

我是否必须在每个中导入variables.scss，mixins.scss，buttons.scss 我做的组件？

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