iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: component-styles guide - inline styles must be CSS (#20701)

Browse Source 
Cannot write them in less, sass, or stylus
See CLI issue https://github.com/angular/angular-cli/issues/8472

PR Close #20701
This commit is contained in:
Ward Bell 2017-11-29 16:43:20 -08:00 committed by Igor Minar
parent 35977e3830
commit 5e25d3986d
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
aio/content/guide/component-styles.md
View File

@ -179,7 +179,7 @@ to a component's `@Component` decorator:
<code-tabs> <code-tabs>
<code-pane title="src/app/hero-app.component.ts (CSS in file)" path="component-styles/src/app/hero-app.component.1.ts"></code-pane> <code-pane title="src/app/hero-app.component.ts (CSS in file)" path="component-styles/src/app/hero-app.component.1.ts"></code-pane>
<code-pane title="src/app/hero-app.component.css" path="component-styles/src/app/hero-app.component.1.css"></code-pane> <code-pane title="src/app/hero-app.component.css" path="component-styles/src/app/hero-app.component.1.css"></code-pane>
</code-tabs> </code-tabs>
<div class="alert is-critical"> <div class="alert is-critical">
@ -245,7 +245,8 @@ See the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-
### Non-CSS style files ### Non-CSS style files
You can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `styleUrls` metadata, e.g., If you're building with the CLI,
you can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example:
<code-example> <code-example>
@Component({ @Component({
@ -256,10 +257,18 @@ You can write style files in [sass](http://sass-lang.com/), [less](http://lesscs
... ...
</code-example> </code-example>
The CLI build process runs the corresponding CSS pre-processors. The CLI build process runs the pertinent CSS preprocessor.
You can also configure the CLI to default to your preferred CSS pre-processer When generating a component file with `ng generate component`, the CLI emits an empty CSS styles file (`.css`) by default.
as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors). You can configure the CLI to default to your preferred CSS preprocessor
as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
"CSS Preprocessor integration").
<div class="alert is-important">
Style strings added to the `@Component.styles` array _must be written in CSS_ because the CLI cannot apply a preprocessor to inline styles.
</div>
{@a view-encapsulation} {@a view-encapsulation}