CSS 在 angular 2 中使用 Sass

Using Sass in angular 2

提问by Abhishek V

I'm trying to setup Sassin my Angular 2project. Basically as I understand there are two ways to create an angular 2 project

我正在尝试Sass在我的Angular 2项目中进行设置。基本上，据我所知，有两种方法可以创建 angular 2 项目

1) Using angular-cli(https://github.com/angular/angular-cli)

1）使用angular-cli（https://github.com/angular/angular-cli）

I referred answer mentioned in https://stackoverflow.com/a/41541042/2868352& I could successfully use scssfiles in angular 2 project, everything worked great but I couldn't locate the generated cssfile from scssfile in project folder. Could anyone explain the reason why no cssfile was generated but still it worked?

我提到了https://stackoverflow.com/a/41541042/2868352 中提到的答案& 我可以成功地使用scssangular 2 项目中的文件，一切都很好，但我无法css从scss项目文件夹中的文件中找到生成的文件。谁能解释为什么没有css生成文件但仍然有效？

2) Using quickstart seed(https://angular.io/guide/quickstart)

2）使用quickstart seed（https://angular.io/guide/quickstart）

I couldn't get any information about how to set up sassin quickstart project. Does anyone have any idea about using sassin the quickstart project provided by angular?

我无法获得有关如何sass在快速启动项目中进行设置的任何信息。有没有人知道sass在 angular 提供的快速入门项目中使用？

Thanks in advance!

提前致谢！

回答by AmanDeepSharma

[Check edited part at end of this answer in case you are using angular cli]

[如果您使用的是 angular cli，请检查此答案末尾的编辑部分]

Explaining how to use sass in 'quickstart seed'(https://angular.io/guide/quickstart) (https://angular.io/guide/setup#download)

解释如何在“快速启动种子”中使用 sass( https://angular.io/guide/quickstart) ( https://angular.io/guide/setup#download)

Please follow these simple steps:

请按照以下简单步骤操作：

Step 1: Setup the quickstart seed

第 1 步：设置快速入门种子

Use the below commands to setup

使用以下命令进行设置

npm install
npm start

you will see 'Hello Angular' on browser.

您将在浏览器上看到“Hello Angular”。

Step 2: Install node-sass and sass-loader

第二步：安装 node-sass 和 sass-loader

Use the commands mentioned below to install

使用下面提到的命令进行安装

npm i node-sass -S
npm i sass-loader -S

Now you can see both of these added in your 'dependencies' inside 'package.json' file.

现在，您可以在“package.json”文件中的“依赖项”中看到这两个添加的内容。

Step 3: Create 2 folders for Sass code and Css code

第三步：为Sass代码和CSS代码创建2个文件夹

Create two folders with any name in "quickstart-master" folder. In this case for example: "sass_folder" and "css_folder". Now create a demo file 'demo.sass' and put it inside 'sass_folder'. You can put a simple sass code in this .sass file. It will look like this:

在“quickstart-master”文件夹中创建两个任意名称的文件夹。在这种情况下，例如：“sass_folder”和“css_folder”。现在创建一个演示文件“demo.sass”并将其放在“sass_folder”中。你可以在这个 .sass 文件中放入一个简单的 sass 代码。它看起来像这样：

  $font-stack:    Helvetica, sans-serif
  $primary-color: #000

  body
    font: 100% $font-stack
    color: $primary-color

Step 4: Make changes in 'package.json' file

第 4 步：在“package.json”文件中进行更改

Add scripts to Build and Watch Sass code present in "sass_folder". After compilation, The resulting css code should be stored in "css_folder". After changes the "Scripts" in 'package.json' file should look like this:

将脚本添加到“sass_folder”中存在的构建和监视 Sass 代码中。编译后，生成的css代码应该存储在“css_folder”中。更改后，“package.json”文件中的“脚本”应如下所示：

"scripts": {
     "build": "tsc -p src/",
     "build:watch": "tsc -p src/ -w",
     "build:e2e": "tsc -p e2e/",
     "serve": "lite-server -c=bs-config.json",
     "serve:e2e": "lite-server -c=bs-config.e2e.json",
     "prestart": "npm run build",
     "start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
     "pree2e": "npm run build:e2e",
     "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
     "preprotractor": "webdriver-manager update",
     "protractor": "protractor protractor.config.js",
     "pretest": "npm run build",
     "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
     "pretest:once": "npm run build",
     "test:once": "karma start karma.conf.js --single-run",
     "lint": "tslint ./src/**/*.ts -t verbose",
     "build:sass": "node-sass sass_folder/ -o css_folder",
     "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
  }

Have a look at 'start', 'build:sass' and 'watch:sass' only.

仅查看 'start'、'build:sass' 和 'watch:sass'。

Step 5: Run the application

第 5 步：运行应用程序

Now you can run the app by using below command:

现在您可以使用以下命令运行该应用程序：

npm start

You will see the compiled css code in "css_folder" with the same file name 'demo.css'. It will look like this (In this case):

您将在“css_folder”中看到编译后的 css 代码，文件名为“demo.css”。它看起来像这样（在这种情况下）：

body {
  font: 100% Helvetica, sans-serif;
  color: #000; }

Now if you make any change in .sass file it will be reflected to .css file dynamically as the script is watching the code.

现在，如果您在 .sass 文件中进行任何更改，它将在脚本监视代码时动态反映到 .css 文件中。

If it shows error, Close the .css file when you make any change in .sass file.

如果显示错误，请在 .sass 文件中进行任何更改时关闭 .css 文件。

Note: For scss code you can follow the same steps. You just have to put .scss file in "sass_folder" in this case.

注意：对于 scss 代码，您可以按照相同的步骤操作。在这种情况下，您只需将 .scss 文件放在“sass_folder”中。

[edited]In case you want to use Angular CLI:

[已编辑]如果您想使用 Angular CLI：

At the time of creation of new Angular project use below mentioned cmnds:

在创建新的 Angular 项目时，使用下面提到的 cmnds：

For sass:

对于 sass：

ng new Demo_Project --style=sass

For scss:

对于 scss：

ng new Demo_Project --style=scss

To change the existing style:

要更改现有样式：

ng set defaults.styleExt scss

After this you can use Cli normally.

之后就可以正常使用Cli了。

回答by Serginho

I can explain you the first one.

我可以给你解释第一个。

If you are using ng serverthe compiled files are saved in a hidden folder in your project.

如果您使用的ng server是编译后的文件，则它们会保存在您项目中的隐藏文件夹中。

If you are using ng build, you can see your compiled files in the /dist folder. In this folder you can found your general styles in the file styles.[hashversion].css, but local component styles are included inside main.[hashversion].js by Webpack.

如果您正在使用ng build，您可以在 /dist 文件夹中看到您编译的文件。在这个文件夹中，你可以在文件 style.[hashversion].css 中找到你的通用样式，但是 Webpack 将本地组件样式包含在 main.[hashversion].js 中。

Angular-cli uses webpack, and if you want to learn more about, see Webpack Docs

Angular-cli 使用 webpack，如果你想了解更多，请参阅Webpack Docs

UPDATE

更新

In the second case, you have to compile sass manually. In the app folder un have a app.component.ts that will be compiled in the same folder to app.component.js by Typescript Compiler. So you have to do the same with sass. Import the CSS file in the component.

在第二种情况下，您必须手动编译 sass。在 app 文件夹中，有一个 app.component.ts，它会被 Typescript Compiler 编译到 app.component.js 的同一个文件夹中。所以你必须对 sass 做同样的事情。在组件中导入 CSS 文件。

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  stylesUrl: ['app/app.component.css']
})
export class AppComponent  { name = 'Angular'; }

Noticed that you cannot use relative path cause everything will be requested from root directory.

请注意，您不能使用相对路径，因为所有内容都将从根目录请求。

Create an app.component.sassand put your styles inside.

创建一个app.component.sass并将您的样式放入其中。

Then execute the sass compiler that compiles the app.component.sassto app.component.css

然后执行SASS编译器编译app.component.sass到app.component.css

Run the server and it will work.

运行服务器，它将工作。

回答by Jayesh Panchal

There are two main scenarios here.

这里有两个主要场景。

1. When creating a new Angular CLI project, use CLI command

   ng new my-angular-app --style=scss

2. When an Angular CLI project has already been set up, use CLI command

   ng set default.styleExt scss

1. 创建新的 Angular CLI 项目时，使用 CLI 命令

   ng new my-angular-app --style=scss

2. 当 Angular CLI 项目已经设置好后，使用 CLI 命令

   ng set default.styleExt scss

In case 2, you need to manually convert existing .cssfiles. You can use also use sassor lessinstead of scss

在情况 2 中，您需要手动转换现有.css文件。您也可以使用 usesass或less代替scss

Check out the full article here.

在此处查看全文。

Using SCSS/SASS/LESS in Angular CLI Project

在 Angular CLI 项目中使用 SCSS/SASS/LESS