angular组件样式_Angular-在组件中导入样式文件的快捷方式

angular组件样式

In a typical Angular project, you'll have many components. Each components has it own stylesheet (css, scss, less, etc). It's quite often that you might need to include global styling files (especially variables file) in your component.

在典型的Angular项目中，您将具有许多组件。 每个组件都有自己的样式表（css，scss，less等）。 通常，您可能需要在组件中包括全局样式文件（尤其是变量文件）。

We've talked on this a bit in our other Angular styles article: Using Sass with the Angular CLI

我们在其他Angular样式文章中对此进行了一些讨论： 在Angular CLI中使用Sass

Let's explore another option for importing style files:

让我们探索另一个导入样式文件的选项：

Sass变量样本 ( A Sass Variables Sample )

Let's say you have a _variables.scss in your src/stylings folder:

假设您的src/stylings文件夹中有一个_variables.scss ：

// your folder structure
- src
    - app
        - app.component.ts
            - hello
                - hello.component.html
                - hello.component.scss
                - hello.component.ts
        - ...
    - stylings
        - _variables.scss

// your _variables.scss file
$brand-color: #800000;

引用变量文件 ( Reference to the Variables file )

Below is our hello.component.html file, let's style the header with our brand-color.

以下是我们的hello.component.html文件，让我们使用brand-color设置标题样式。

<!-- hello.component.html -->
<h1>
  Hello World!
</h1>

The $brand-color variable is in stylings/_variables.scss file. We need to import the file in order to use it:

$brand-color变量位于stylings/_variables.scss文件中。 我们需要导入文件才能使用它：

// hello.component.scss
@import "../../../stylings/variables"; // this is not cool!

h1 {
    color: $brand-color;
}

See the ../../../stylings/ syntax? Do you like it?

请参阅../../../stylings/语法？ 你喜欢它吗？

Imagine you need to repeat this ../../../stylings/ in another tens or hundreds of components and you need to remember the relative path. This is not cool. Let's fix this!

想象一下，您需要在其他数十个或数百个组件../../../stylings/重复此../../../stylings/ ，并且需要记住相对路径。 这不酷。 让我们解决这个问题！

Angular CLI配置的快捷方式 ( Shortcut with Angular CLI configuration )

If your project is generated with Angular CLI, you can add a configuration stylePreprocessorOptions > includePaths in .angular.cli.json file. This configuration allows you to add extra base paths that will be checked for imports. It tells Angular CLI to look for styling files in the mentioned paths before processing each component style file.

如果您的项目是使用Angular CLI生成的，则可以在.angular.cli.json文件中添加配置stylePreprocessorOptions > includePaths .angular.cli.json 。 通过此配置，您可以添加将检查导入的额外基本路径。 它告诉Angular CLI在处理每个组件样式文件之前，在上述路径中查找样式文件。

For example, in our case, let's add ./stylings in the paths. Since the configuration accept an array, you can add multiple paths.

例如，在我们的例子中，让我们在路径中添加./stylings 。 由于配置接受一个数组，因此可以添加多个路径。

{
    ...
    "apps": [{
        "root": "src",
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
              "./stylings"
            ]
        }

    }]
}

With this, we can update our hello.component.scss to just @import "variables". Sweet!

这样，我们可以将hello.component.scss更新为@import "variables" 。 甜！

// hello.component.scss
@import "variables"; // change to just variables, say goodbye to ../../../stylings/

h1 {
    color: $brand-color;
}

如果您在路径中重复了文件名怎么办？ ( What if you have duplicated file name in paths? )

Imagine you included two styling paths in .angular.cli.json, both have _variables.scss file. Guess what will happen? Will the CLI pick up both files or throw errors?

想象一下，您在.angular.cli.json包含了两个样式路径， .angular.cli.json都具有_variables.scss文件。 猜猜会发生什么？ CLI会同时提取两个文件还是抛出错误？

Let's test it out together!

让我们一起测试一下！

// your folder structure
- src
    - ...
    - stylings
        - _variables.scss
    - stylings2 // add this
        - _variables.scss

In stylings2/_variables.scss, you have the following styles,

在stylings2/_variables.scss ，您具有以下样式，

// stylings2/_variables.scss
$brand-color: blue;
$font-size-large: 40px;

Update your .angular.cli.json configurations, to include styling2 folder path.

更新您的.angular.cli.json配置，以包括styling2文件夹路径。

{
    ...
    "apps": [{
        "root": "src",
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
              "./stylings",
              "./stylings2"
            ]
        }

    }]
}

Update your hello.component.scss file,

更新您的hello.component.scss文件，

// hello.component.scss
@import "variables";

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

Restart your dev server. Wait for a while, and you should expect... Error!

重新启动开发服务器。 等待一会儿，您应该期望...错误！

告诉我为什么！ (Tell me why!)

Turn out, if there are multiple files with same name, Angular CLI will pick only the first file that match the name. In this case, it will pick the stylings/_variables.scss file. That's why it could not get the variable $font-size-large, because it's in styling2/_variables.scss file.

事实证明，如果有多个同名文件，Angular CLI将仅选择与该名称匹配的第一个文件。 在这种情况下，它将选择stylings/_variables.scss文件。 这就是为什么它无法获取变量$font-size-large原因，因为它位于styling2/_variables.scss文件中。

但是...我真的需要两个同名文件！ ( But... I really need two files with the same name! )

Well, there are cases where you have multiple files with the same name and you really need it, and you would like to have shortcuts as well. The workaround would be including the parent path. For example, in our case, both stylings and stylings2 folders parent are src.

好吧，在某些情况下，您有多个具有相同名称的文件并且您确实需要它，并且您也希望具有快捷方式。 解决方法是包括父路径。 例如，在我们的情况下， stylings和stylings2文件夹parent均为src 。

We can update the .angular.cli.json configuration to the following:

我们可以将.angular.cli.json配置更新为以下内容：

{
    ...
    "apps": [{
        "root": "src",
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
              "."
            ]
        }

    }]
}

Then, in your hello.component.scss, you can refer to both variables file like the following,

然后，在hello.component.scss ，可以像下面这样引用两个变量文件，

// hello.component.scss
@import "stylings/variables";
@import "stylings2/variables"; 

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

Well, it's not perfect, slightly more words to type, but better than ../../../ right? Also, it might be rare scenario that you have multiple style files with same name in the same project, I guess?

好吧，这并不完美，可以输入更多的单词，但是比../../../好吗？ 另外，在少数情况下，您可能会在同一项目中有多个具有相同名称的样式文件，我猜呢？

Another shorter workaround would be including parent path and one styling path:

另一个更短的解决方法是包括父路径和一个样式路径：

{
    ...
    "apps": [{
        "root": "src",
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
              ".",
              "./stylings"
            ]
        }

    }]
}

You can save a few lines in your hello.component.scss.

您可以在hello.component.scss保存几行。

// hello.component.scss
@import "variables"; // shorter, don't need styling/ as it's one of the configured paths
@import "stylings2/variables"; 

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

在node_modules中包含路径怎么办？ ( What about including paths in node_modules? )

The Angular CLI configuration is applicable to files in node_modules as well. Let's say you are using your custom styling npm package, for example bootstrap-sass module.

Angular CLI配置也适用于node_modules文件。 假设您正在使用自定义样式的npm包，例如bootstrap-sass模块。

npm install bootstrap-sass --save

Here is the folder structure of bootstrap-sass:

这是bootstrap-sass的文件夹结构：

- node_modules
    - bootstrap-sass
        - assets
            - stylesheets
                - bootstrap
                    - ...
                    - _grid.scss
                    - _variables.scss

Let's say you would like to use the bootstrap's _variables.scss, you can update your .angular.cli.json file to include bootstrap path,

假设您要使用引导程序的_variables.scss ，可以更新.angular.cli.json文件以包含引导程序路径，

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

    }]
}

Then, in your hello.component.scss, you can refer to the bootstrap variables file like the following,

然后，在hello.component.scss ，您可以参考如下的bootstrap变量文件，

// 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;
}

摘要 ( Summary )

Let's remove the relative path hell (../../../) with this useful Angular CLI configuration!

让我们使用此有用的Angular CLI配置删除相对路径地狱（ ../../../ ）！

That's it. Happy coding!

而已。 编码愉快！

翻译自: https://scotch.io/tutorials/angular-shortcut-to-importing-styles-files-in-components

angular组件样式