可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I'm new to Angular and I'm coming from the Ember community. Trying to use the new Angular-CLI based off of Ember-CLI.
I need to know the best way to handle SASS in a new Angular project. I tried using the ember-cli-sass repo to see if it would play along since a number of core components of the Angular-CLI are run off of Ember-CLI modules.
It didnt work but than again not sure if I just misconfigured something.
Also, what is the best way to organize styles in a new Angular project? It would be nice to have the sass file in the same folder as the component.
回答1:
When you are creating your project with angular cli try this:
ng new My_New_Project --style=sass
This generating all your components with predifined sass files.
If you want scss syntax create your project with :
ng new My_New_Project --style=scss
If you are changing your existing style in your project
ng set defaults.styleExt scss
Cli handles the rest of it.
回答2:
New projects
For new projects we can set the options --style=sass or --style=scss according to the desired flavor SASS/SCSS
then install node-sass,
npm install node-sass --save-dev
Updating existing projects
To make angular-cli to compile sass files with node-sass, I had to run,
npm install node-sass --save-dev
which installs node-sass. Then
to set the default styleExt to sass
(or)
change styleExt to sass or scss for desired syntax in .angular-cli.json,
for SASS syntax
"defaults": { "styleExt": "sass", }
for SCSS syntax
"defaults": { "styleExt": "scss", }
Although it generated compiler errors.
ERROR in multi styles Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project' @ multi styles
which was fixed by changing the lines of .angular-cli.json,
"styles": [ "styles.css" ],
to either,
for SASS syntax
"styles": [ "styles.sass" ],
for SCSS syntax
"styles": [ "styles.scss" ],
回答3:
Quoted from Officials github repo here -
To use one just install for example
npm install node-sass
and rename .css files in your project to .scss or .sass. They will be compiled automatically. The Angular2App's options argument has sassCompiler, lessCompiler, stylusCompiler and compassCompiler options that are passed directly to their respective CSS preprocessors.
See here
回答4:
Like Mertcan said, the best way to use scss is to create the project with that option:
ng new My_New_Project --style=scss
Angular-cli also adds an option to change the default css preprocessor after the project has been created by using the command:
ng set defaults.styleExt scss
For more info you can look here for their documentation:
https://github.com/angular/angular-cli
回答5:
Tell angular-cli to always use scss by default
To avoid passing --style scss each time you generate a project, you might want to adjust your default configuration of angular-cli globally, with the following command:
ng set --global defaults.styleExt scss
Please note that some versions of angular-cli contain a bug with reading the above global flag (see link). If your version contains this bug, generate your project with:
ng new project --style=scss
回答6:
I noticed a very anoying gotcha in moving to scss files!!! One MUST move from a simple:
styleUrls: ['app.component.scss']
to a
styleUrls: ['./app.component.scss']
which ng does when you generate a new project, but seeminly not when the default project is created. If you see resolve errors during ng build, check for this issue. It only took me ~ 1 hour.
回答7:
Best could be ng new myApp --style=scss
Then Angular CLI will create any new component with scss for you...
Note that using scss not working in the browser as you probably know.. so we need something to compile it to css, for this reason we can use node-sass, install it like below:
npm install node-sass --save-dev
and you should be good to go!
If you using webpack, read on here:
Command line inside project folder where your existing package.json is: npm install node-sass sass-loader raw-loader --save-dev
In webpack.common.js, search for "rules:" and add this object to the end of the rules array (don't forget to add a comma to the end of the previous object):
{ test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader }
Then in your component:
@Component({ styleUrls: ['./filename.scss'], })
If you want global CSS support then on the top level component (likely app.component.ts) remove encapsulation and include the SCSS:
import {ViewEncapsulation} from '@angular/core'; @Component({ selector: 'app', styleUrls: ['./bootstrap.scss'], encapsulation: ViewEncapsulation.None, template: `` }) class App {}
from Angular starter here.
回答8:
Set it as Global Default
ng set defaults.styleExt=scss --global
翻译