如何在 Angular2 种子项目中实现 SCSS？答案

【问题标题】：How to implement SCSS in Angular2 Seed Project?如何在 Angular2 种子项目中实现 SCSS？
【发布时间】：2017-07-18 05:11:06
【问题描述】：

如何在 Angular2 Seed 项目中实现 SCSS。？有没有更好的教程或参考网站可以看到这个？

我尝试在此链接中实现相同的功能 https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

但我收到此错误

ERROR in ./src/app/components/subscription/subscription.component.scss
Module parse failed: C:\indiaAbroad\iaApp\src\app\components\subscription\subscription.component.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .subscription {
|
| }
 @ ./src/app/components/subscription/subscription.component.ts 18:21-61
 @ ./src/app/config/app.module.ts
 @ ./src/main.browser.ts
 @ multi main                                            Hash: e76bd7a5a02aa33e1272

【问题讨论】：

./src/app/components/subscription/subscription.component.scss 中的错误模块解析失败：C:\indiaAbroad\iaApp\src\app\components\subscription\subscription.component.scss Unexpected token (1:0) 您可能需要适当的加载程序来处理此文件类型。 | .订阅{ | | @ ./src/app/components/subscription/subscription.component.ts 18:21-61 @ ./src/app/config/app.module.ts @ ./src/main.browser.ts @multi main

标签： css angular typescript sass

【解决方案1】：

你做的是对的。

安装此软件包后，请重新启动 npm 服务器。它会工作的！！！

【讨论】：

【解决方案2】：

npm install node-sass sass-loader raw-loader --save-dev

在 webpack.common.js 中，搜索“rules:”
{
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}
source

【讨论】：

【解决方案3】：

您可以使用 Angular CLI。它支持 sass 样式

https://github.com/angular/angular-cli

ng new project --style scss

【讨论】：

Angular CLI 是否适合在生产环境中使用
有一个命令可以在您的应用程序准备好后将其打包以进行生产。 ng build --environment prod。我已经在多个项目中使用过它，我必须说它非常方便，可以为您节省大量时间。