我想要只载入需要的性能登录页面的CSS。 在我的其他网页我想,这将包含我所有的CSS每一页上缓存分组的css文件。
我有以下文件:
minifiedcssforloginpage.scss
grouped-pages.scss
在minifiedcssforloginpage.scss我宣布$加载完成,CSS:假的。 后来我导入myproject.scss其中包含我的模块,布局,核心所有的进口...在myproject.scss我想这样做
@if $load-complete-css {
@import module1;
@import module2;
@import module3;
}
所以minifiedcssforloginpage.scss会产生用更少的CSS,然后进行分组,pages.css minifiedcssforloginpage.css(即有一个变量$载完成,CSS设置为true)。
但是,我得到一个错误,这是不可能的“导入指令可能无法控制指令或混入内使用”。
这是的,这只是不允许的事情之一。 你能做的唯一的事情就是把这些进口混入(导入文件外@if
并调用混入如适用)。
澄清:
_partial.scss
@mixin partial {
.test { color: red }
// other styles here
}
styles.scss
@import "partial";
@if $someval == true {
@include partial;
}
核心开发团队不愿意实现这个功能,虽然他们正在考虑一个全新的依赖制度的实施。
请参阅下面的Github上的问题:
- @if内允许@import(#451)
- 使用控制指令或混入(#779)内@import声明
- 允许可选@imports(#779)
- 动态相关性(#739)
把你的风格融于不同的部分文件的方式,对你有意义。 然后,你可以创建一个登录页面,仅导入文件与相关风格的独立SASS文件。
要引用我的回答另一个问题:
这是目前无法使用SASS动态包含文件。 @import
不能控制指令内使用(例如@if
)或混入,在一个import指令使用可变是错误的语法,并且没有指令用于结束文件执行早期(这有效地将允许有条件的进口)。 但是,你可以通过改变你如何组织你的样式规则解决您的问题。
......如果你有[应]有条件地包括(他们)应该在混入封装,在“模块”或“库”文件样式。 ......其主要思想是, 导入一个这样的文件将不会输出任何CSS。 这样一来,就可以冗余导入这些文件,所以你可以在任何需要他们使用的混入。