angular全局样式

Global styles

全局样式

The styles.css file allows users to add global styles and supports
CSS imports.
styles.css 文件允许用户添加全局样式和支持
CSS imports.

If the project is created with the --style=sass option, this will be a .sass
file instead, and the same applies to scss/less/styl.
假如项目创建使用 --style=sass 选项, 这是一个 .sass
文件的代替, 同样适用于 scss/less/styl.

You can add more global styles via the styles option inside your project's build target options
in angular.json.
These will be loaded exactly as if you had added them in a <link> tag inside index.html.
您可以通过 angular.json 中项目的构建目标选项中的 styles 选项添加更多全局样式。这些将被加载,就像您将它们添加到index.html中的<link>标记中一样。

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "styles": [
        "src/styles.css",
        "src/more-styles.css",
      ],
      ...

You can also rename the output and lazy load it by using the object format:
您也可以使用对象格式重命名输出并延迟加载它:

"styles": [
  "src/styles.css",
  "src/more-styles.css",
  { "input": "src/lazy-style.scss", "lazy": true },
  { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" },
],

In Sass and Stylus you can also make use of the includePaths functionality for both component and
global styles, which allows you to add extra base paths that will be checked for imports.
在Sass和Stylus中,您还可以使用组件和全局样式的 includePaths 功能,这允许您添加额外的基准路径,这些基准路径将被检查以导入。

To add paths, use the stylePreprocessorOptions option:
要添加路径,请使用 stylePreprocessorOptions 选项:

"stylePreprocessorOptions": {
  "includePaths": [
    "src/style-paths"
  ]
},

Files in that folder, e.g. src/style-paths/_variables.scss, can be imported from anywhere in your
project without the need for a relative path:
该文件夹中的文件,例如 'src/style-paths _variables.scss',可以从项目中的任何位置导入,而不需要相对路径:

// src/app/app.component.scss
// A relative path works
// 相对路径工作
@import '../style-paths/variables';
// But now this works as well
// 但现在也工作
@import 'variables';

Note: you will also need to add any styles to the test builder if you need them for unit tests.
注意:如果需要它们进行单元测试,您还需要向测试生成器添加任何样式。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • This project was bootstrapped with Create React App. Belo...
    unspecx阅读 5,226评论 0 2
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,449评论 0 10
  • 如果你想要免费的意见和建议 那就太多了 绝对堪称神奇 每个人都想帮你 人人都想表达自己 你肯定会听得眼花缭乱无从做...
    阿桂爱原创阅读 793评论 22 40
  • 这是昨夜在我梦中出现的一个词:等待。 黄昏时分,暮色四合,百鸟归巢,一天的日子结束了,我抬头仰望着那依稀还看得见的...
    涂雅仁澈阅读 310评论 5 3
  • -1- 八月,秋风无边,一树桂花开得正欢,浅黄的小花藏在枝叶,只是认真地吐着芬芳,香气将空气染得香甜,从屋外飘进屋...
    晴天的天阅读 968评论 112 72