在Angle 2中使用Sass [英] Using Sass in angular 2

问题描述

我正在尝试在我的Angular 2项目中设置Sass.据我了解，基本上有两种创建角度2项目的方法

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

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

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

我提到了 https://stackoverflow.com/a/41541042/2868352 中提到的答案我可以在angular 2项目中成功使用scss文件，一切正常，但无法在项目文件夹中找到从scss文件生成的css文件.谁能解释为什么没有生成css文件但仍然有效的原因吗?

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

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

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

我无法获得有关如何在快速入门项目中设置sass的任何信息.是否有人对在angular提供的快速入门项目中使用sass有任何想法?

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

提前谢谢！

推荐答案

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

说明如何在快速入门种子"中使用sass ( https://angular. io/guide/quickstart ) ( https://angular.io/guide/setup#download )

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

Please follow these simple steps:

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

使用以下命令进行设置

npm install
npm start

您将在浏览器中看到"Hello Angular".

you will see 'Hello Angular' on browser.

步骤2:安装node-sass和sass-loader

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

Use the commands mentioned below to install

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

现在，您可以在"package.json"文件中的依赖项"中看到这两者.

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

第3步:为Sass代码和Css代码创建2个文件夹

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

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:

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

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

第4步:在"package.json"文件中进行更改

将脚本添加到"sass_folder"中存在的Build和Watch Sass代码中.编译后，生成的CSS代码应存储在"css_folder"中.更改后，"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:

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

仅查看开始"，"build:sass"和"watch:sass".

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

第5步:运行应用程序

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

Now you can run the app by using below command:

npm start

您将在"css_folder"中看到具有相同文件名"demo.css"的已编译的CSS代码.看起来像这样(在这种情况下):

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):

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

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

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.

注意:对于scss代码，您可以遵循相同的步骤.在这种情况下，您只需将.scss文件放入"sass_folder".

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

如果要使用Angular CLI:

在创建新的Angular项目时，请使用以下提到的cmnds:

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

对于无礼:

ng new Demo_Project --style=sass

对于scss:

ng new Demo_Project --style=scss

要更改现有样式，请执行以下操作:

To change the existing style:

ng set defaults.styleExt scss

此后，您可以正常使用Cli.

After this you can use Cli normally.

这篇关于在Angle 2中使用Sass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！