Javascript Angular 2网页包2-Sass在组件中不工作

我一直遵循这里的指南，将scss文件合并为angular 2组件的样式，但它不起作用

如何将scss文件合并到带有webpack的angular 2组件中

以下是主要组成部分：

import { Component } from '@angular/core';


@Component({
    selector: 'my-app',
    templateUrl: 'src/app/app.component.html',
    styleUrls: [ 'src/app/app.component.scss' ]
})
export class AppComponent {
    constructor() {}

    name: string = 'My Demo';
}

@Component({
  styleUrls: ['./filename.scss'],
})

我知道文章建议在我的网页配置中使用原始加载程序，但这也不起作用

SCS只保留在中，不进行预处理

您可以在plnkr上查看我的基本项目详情：

按照自述说明进行构建和服务

---

似乎没有太多关于在组件中包含scss文件的最新文档？

如果您想要一个scss开箱即用的新项目，请使用生成它，然后就可以开始了。比自己实现sass容易得多

ng new sassy-project --style=sass

或：

---

您可以用下一种方法进行精简：

现有package.json所在的项目文件夹内的命令行：

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

在webpack.common.js中，搜索“loaders:”并将此对象添加到loaders数组的末尾（不要忘记在前一个对象的末尾添加逗号）：

然后在组件中：

import { Component } from '@angular/core';


@Component({
    selector: 'my-app',
    templateUrl: 'src/app/app.component.html',
    styleUrls: [ 'src/app/app.component.scss' ]
})
export class AppComponent {
    constructor() {}

    name: string = 'My Demo';
}

@Component({
  styleUrls: ['./filename.scss'],
})

如果您想要全局CSS支持，那么在顶级组件（可能是app.component.ts）上删除封装并包含SCS：

import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

---

如果它不起作用，这不是一个问题。真正的问题是什么？@RomanC如何让组件与sass一起工作？我如何将scss文件整合到我的angular 2组件中？我更新了问题：）有趣。谢谢这似乎有些过分，所以这是一个标准要求。我的项目是使用angular cli生成的，我无法在项目的根目录下找到webpack.common.js文件。我唯一能找到webpack.common.js的地方是在webpack dev的node_模块内，在那里编辑是不安全的。是的，这个解决方案类似于

https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

但它不起作用。你最终弄明白了吗？有同样的问题。