关于angular:Angular-项目里使用-scss-文件的一些技巧

38次阅读

共计 1286 个字符，预计需要花费 4 分钟才能阅读完成。

应用 Angular CLI 新建一个 Angular 我的项目：

ng new my-sassy-app –style=scss

创立如下的 scss 文件：

styles.scss 是咱们应用的次要 scss 文件，外面导入了以下划线结尾的 _variables.scss 和 _mixins.scss:

// src/sass/styles.scss

@import './variables';
@import './mixins';

最初在 angular.json 里指定这个 styles.scss 文件即可：

"styles": ["sass/styles.scss"],

当初咱们有了新的 _variables.scss 和 _mixins.scss 文件，咱们心愿在咱们其余的 Angular Component 中应用它们。在其余我的项目中，您可能习惯于在任意地位拜访这些 scss 文件里定义的 Sass 变量。

在 Angular CLI 中，所有组件都是自蕴含的，它们的 Sass 文件也是如此。为了在组件的 Sass 文件中应用 _variables.scss 中定义的变量，您须要导入 _variables.scss 文件。

一种办法是应用组件的 相对路径 @import，比方 ../../ 这种写法。如果您有许多嵌套文件夹或最终须要挪动这些 scss 文件，这或者不是一个好方法——可读性差，并且容易出错。

一个好方法是应用 alias 别名语法，用特殊符号波浪号代表：~. 在英语里 ～ 的单词是 tilde.

// src/app/app.component.scss

@import '~sass/variables';

// now we can use those variables!

波浪号 (~) 将通知 Sass 查看 src/ 文件夹，它是导入 Sass 文件的快捷方式(short cut).

咱们通过一个理论的例子来解说。假如咱们引入了一个依赖 `bootstrap-sass：

npm install bootstrap-sass –save

这个 npm 包具备一些 scss 文件：

咱们能够更新 angular.json, 引入 node_modules 文件夹：

{
    ...
    "apps": [{
        "root": "src",
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
              ".",
              "./stylings",
              "../node_modules/bootstrap-sass/assets/stylesheets"
            ]
        }
        
    }]
}

而后，在 Component 的 style 文件里，就能够应用 相对路径，来导入这些 node_modules 文件夹下的 scss 文件：

// hello.component.scss
@import "variables";
@import "stylings2/variables"; 
@impoer "bootstrap/variables";

h1 {
    color: $brand-color;
    font-size: $font-size-large;
    font-family: $font-family-serif;
}

正文完