让样式在 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
?
最佳答案
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/
关于javascript - Angular-Cli - 如何构建 scss?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42971848/