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

Question

我有一个基于 Webpack starter 的 Angular 2 项目.我正在尝试弄清楚如何将 SASS 直接用于组件(无需调用外部 .scss 文件)。我找到的每个示例都使用 styleUrls 和扩展名 .scss 来识别何时调用 sass-loader。

Answer 1

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

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

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