在角度2中使用Sass

Question

我正在尝试Sass在我的Angular 2项目中进行设置.基本上我理解有两种方法来创建一个角度2项目

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

我提到了/sf/answers/2907872971/中提到的答案,我可以scss在angular 2项目中成功使用文件,一切都很好,但我无法css从scss项目文件夹中的文件中找到生成的文件.任何人都可以解释为什么没有css生成文件但仍然有效的原因？

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

我无法获得有关如何sass在quickstart项目中设置的任何信息.有没有人对sass在angular提供的quickstart项目中使用有任何想法？

提前致谢!

Answer 1

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

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

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

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

使用以下命令进行设置

npm install
npm start

你会在浏览器上看到'Hello Angular'.

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

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

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

现在,您可以在'package.json'文件中的'dependencies'中看到这两个添加内容.

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

在"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

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

添加脚本以构建和观察"sass_folder"中存在的Sass代码.编译后,生成的css代码应存储在"css_folder"中.更改后,'package.json'文件中的"Scripts"应如下所示:

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

看看'start','build:sass'和'watch:sass'.

第5步:运行应用程序

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

npm start

您将在"css_folder"中看到编译后的css代码,文件名为"demo.css".它看起来像这样(在这种情况下):

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

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

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

注意:对于scss代码,您可以执行相同的步骤.在这种情况下,您只需将.scss文件放在"sass_folder"中.

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

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

对于sass:

ng new Demo_Project --style=sass

对于scss:

ng new Demo_Project --style=scss

要更改现有样式:

ng set defaults.styleExt scss

在此之后,您可以正常使用Cli.

Answer 2

我可以解释你的第一个.

如果您使用的ng server是已编译的文件,则将其保存在项目的隐藏文件夹中.

如果您正在使用ng build,则可以在/ dist文件夹中查看已编译的文件.在这个文件夹中,你可以在文件样式中找到你的常规样式.[hashversion] .css,但是本地组件样式包含在main中.[hashversion] .js由Webpack包含.

Angular-cli使用webpack,如果您想了解更多信息,请参阅Webpack Docs

UPDATE

在第二种情况下,您必须手动编译sass.在app文件夹中,un有一个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'; }

注意到您不能使用相对路径导致从根目录请求所有内容.

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

然后执行编译app.component.sassto 的sass编译器app.component.css

运行服务器,它将工作.