有没有办法在Angular2组件中使用内联sass？

Question

我有一个基于webpack启动器的Angular 2项目(https://github.com/AngularClass/angular2-webpack-starter).我试图弄清楚如何将sass直接用于组件(不调用外部.scss文件).我找到的每个例子都使用styleUrls和扩展名".scss"来识别何时调用sass-loader.

Answer 1

使用sass-loader：require("!raw-loader!sass-loader!./file.scss"); 这将返回编译后的 CSS 代码file.scss，解析 SASS 导入。

当指定 时styles: '//SASS style'，webpack 无法确定样式是否在 SASS 中以及是否sass-loader应该使用 。您将需要使用以下模式：

import styles from './styles.sass';
@Component({
  styles: styles
})