使用angular7的引导响应方法需要清晰度
使用angular7的引导响应方法需要清晰度
提问于 2019-01-29 17:35:39
在我的styles.scss中，我导入了bootstrap变量，并对其进行了测试。
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/mixins/_breakpoints';
$grid-breakpoints: (
sm: 768px,
md: 768px,
lg: 1024px
);
$container-min-widths: (
sm: 768px,
md: 768px,
lg: 1024px
);
@import "~bootstrap/scss/bootstrap";
@include media-breakpoint-down (sm) {
body{
background: green;
}
}
@include media-breakpoint-between (md, lg) {
body{
background: blue;
}
}
@include media-breakpoint-up (lg) {
body{
background: gray;
}
}但我的问题是，如果我使用app.component.scss -仍然需要再次导入所有变量吗？在没有导入的情况下，我尝试了，例如：
@import '../../styles.scss'
@include media-breakpoint-down (sm) {
body{
background: green;
}
}
@include media-breakpoint-between (md, lg) {
body{
background: blue;
}
}
@include media-breakpoint-up (lg) {
body{
background: gray;
}
}但得到的错误如下：
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@include media-breakpoint-down (sm) {
^
Media query expression must begin with '('
in D:\IBO\POC\ibo\src\app\app.component.scss (line 3, column 1)
i ｢wdm｣: Failed to compile.难道我们不能一次下载所有应用程序的特定需求吗？或者正确的方法是什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-18 17:06:11
这就是css封装在Angular中的工作方式，如果你想在你的scss中使用带有外部@mixins或样式的SASS函数(如@include，@extend)，你每次都需要导入这些外部文件。
这并不是一个很好的做法，因为它会在最终的html页面中产生大量的css (每次你@import一个文件，它的整个内容都会被复制)。因此，一个更好的方法是在你的styles.scss中加入一些常见的样式，并在整个应用程序中使用它们。
在你的例子中，我不明白为什么你需要在app.component.scss中做同样的事情？它只是为了测试吗？您不需要这样做-在styles.scss中放置通用样式(如您的样式)就足够了，并且它们应该应用于整个应用程序。只需确保您的样式已添加到angular.json文件的样式部分下。类似于：
"styles": [
"src/styles.scss"
]希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54417865
复制相关文章
相似问题
腾讯云开发者
