脚本宝典收集整理的这篇文章主要介绍了Angular中处理scss快捷导入的方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_512_2@前言:
在项目中一般都有对SCSS文件进行模块化的处理,比如VARible.scss | mixin.scss,这种Global Scss
Theme define.
- 问题:
当项目文件变得很错综复杂的时候尤其是在使用Angular进行开发的项目中,
当其他的主题scss文件需要去引入这个Global scss theme时, 很容易造成一个引用路径很冗长的问题.例如 @import
'../../../../../stylings/varible.scss';
- 解决方案:
在Angular.json中进行项目的CI配置.
#Angular.json
{
...
"apps": [{
"root": "src",
...
"stylePReprocessorOptions": {
"includePaths": [
"./stylings"
]
}
}]
}
// hello.component.scss
@import "variables"; // 直接引入 variables, 和 ../../../stylings/ 说拜拜吧
h1 {
color: $brand-color;
}
Think: 同名怎么处理?能否加入前缀作为区分?借鉴实现Angular MATErial的scss导入方式@import '~@angular/material/theme.scss'?
以上是脚本宝典为你收集整理的Angular中处理scss快捷导入的方式全部内容,希望文章能够帮你解决Angular中处理scss快捷导入的方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。