Angular中处理scss快捷导入的方式

发布时间:2019-06-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。