Css 在angular 2中使用Sass

我正在尝试在我的

angular2

项目中设置

Sass

。基本上，据我所知，创建angular 2项目有两种方法

1）使用

angular cli

（）

我参考了中提到的答案&我可以在angular 2项目中成功地使用

scss

文件，一切都很好，但我无法从项目文件夹中的

scss

文件中找到生成的

css

文件。有谁能解释一下为什么没有生成

css

文件，但仍然有效

2） 使用

快速启动种子
（）

我无法获得有关如何在quickstart项目中设置
sass
的任何信息。有人知道在angular提供的quickstart项目中使用
sass
吗

提前谢谢
 我可以向你解释第一个

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

如果使用的是
ng build
，则可以在/dist文件夹中看到编译后的文件。在此文件夹中，您可以在文件styles.[hashversion].css中找到常规样式，但本地组件样式包含在main.[hashversion].js by Webpack中

Angular cli使用webpack，如果您想了解更多信息，请参阅

更新

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

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

@组件({
选择器：“我的应用程序”，
模板：`Hello{{name}}`，
stylesUrl:['app/app.component.css']
})
导出类AppComponent{name='Angular'；}

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

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

然后执行sass编译器，将
app.component.sass
编译为
app.component.css

运行服务器，它就会工作。
[如果您使用的是angular cli，请检查此答案末尾的编辑部分]

解释如何在“快速启动种子”中使用sass（）
（）

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

步骤1：设置快速启动种子

使用以下命令进行设置

npm install
npm start

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

步骤2：安装节点sass和sass加载程序

使用下面提到的命令安装

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

现在，您可以在“package.json”文件中的“dependencies”中看到这两个属性

步骤3：为Sass代码和Css代码创建2个文件夹

在“quickstart master”文件夹中创建两个任意名称的文件夹。例如，在这种情况下：
“sass_文件夹”和“css_文件夹”。现在创建一个演示文件“demo.sass”，并将其放入“sass_文件夹”中。您可以在这个.sass文件中放入一个简单的sass代码。它将如下所示：

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

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

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

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

添加脚本以生成并查看“Sass_文件夹”中的Sass代码。编译后，生成的css代码应存储在“css_文件夹”中。更改后，'package.json'文件中的“脚本”应如下所示：

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

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

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

只看一下“开始”、“构建：sass”和“观看：sass”

步骤5：运行应用程序

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

npm start

您将在“css_文件夹”中看到编译后的css代码，其文件名为“demo.css”。它将如下所示（在本例中）：

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

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

注意：对于scss代码，您可以遵循相同的步骤。在这种情况下，您只需将.scss文件放入“sass_文件夹”

[已编辑]
如果要使用Angular CLI:

在创建新的角度项目时，使用以下提到的CMND：

对于sass：

ng new Demo_Project --style=sass

对于SCS：

ng new Demo_Project --style=scss

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

ng set defaults.styleExt scss

在此之后，您可以正常使用Cli。
这里有两个主要场景

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

ng新我的角度应用程序--style=scss

已设置Angular CLI项目时，请使用CLI命令

ng set default.styleExt scss

在案例2中，您需要手动转换现有的
.css
文件。您还可以使用
sass
或
less
代替
scss

在这里查看全文

angular cli
使用webpack，该webpack不会创建css文件，直到生产构建时，根据配置可能会生成一些css文件。对于
快速启动
，只需在npm
start
命令中添加节点sass调用，它就可以工作了automatically@smnbbrv感谢您的解释。在angular cli中使用sass现在已经很清楚了。但是对于quickstart，在NPMStart命令中添加节点sass调用似乎不起作用。不应用scss样式。我还需要做什么吗？谢谢你的解释。第一个疑问现在已经澄清了。。你知道quickstart seed中的sass吗？谢谢你提供详细的步骤。现在我应该将css_文件夹中生成的css文件链接到html文件，对吗？我的意思是像这样-
？除了链接到html文件之外，您还可以在.ts组件文件中的@Component的'styleURL'中添加路径。最好知道如何使用Angular CLI的默认serve命令
ng serve
而不是
npm start
@DannyBullis来运行它。我已经编辑了答案，如果您使用的是angular Cli，请在答案的末尾签出您应该添加的内容，即您实际上必须键入
npm run watch:sass
才能观看