Visual Studio 2017 - Angular - Webpack - SASS - 未应用样式答案

【问题标题】：Visual Studio 2017 - Angular - Webpack - SASS - style not appliedVisual Studio 2017 - Angular - Webpack - SASS - 未应用样式
【发布时间】：2017-12-20 15:45:47
【问题描述】：

我从 Visual Studio 创建了一个新的 Angular 应用程序。它不支持sass。

我安装了node-sass、raw-loader 和sas-loader 并将该行添加到webpack.config.js 中：

{ test: /\.scss$/, loaders: ["raw-loader", "sass-loader"] }

我将它添加到我的 home 组件中：

styleUrls: ['./home.component.scss']

home.component.scss 文件仅包含以下内容：

.body {
    background-color: red
}

网站运行没有错误，但背景是白色的。另外，我没有看到相应的 css 文件（应该在哪里？）。

【问题讨论】：

标签： angular visual-studio webpack sass

【解决方案1】：

在空的 Visual Studio 模板中，“.body”与 home 组件中的任何元素都不匹配。

要测试，请尝试 'home.component.scss'：

$primary-color: red;
h1 {
    color: $primary-color;
}

没有对应的css文件，编译后的css写入html中的一个style标签：

<style>
h1[_ngcontent-c2] {
  color: red; }
</style>

【讨论】：