sass - 如何在组件中添加 scss 文件作为 styleUrl？

Question

我想知道是否可以在我的 Angular 2 组件中添加 .scss 文件？

假设我有以下内容:

@View({
  template: `
     <div class="button" [ng-class]="{active: isOn, disabled: isDisabled}" 
         (click)="toggle(!isOn)">
         Click me!
     </div>`,
  styleUrl: ['style.scss'],
  directives: [NgClass]
})

将 scss 文件编译成 css 是实现我想要做的事情的唯一方法吗？

谢谢

Answer 1

这是可能的，但你需要让服务器能够支持这种类型的文件，例如在请求期间即时编译它们，或者从缓存中获取预编译的 CSS 文件。在任何情况下，当您导航到

时的响应

GET /approot/component/path/style.scss

需要是有效的 text/css 类型。默认情况下，没有网络服务器会这样做。 Express、Apache 等完全有可能，但它需要配置。

另一种选择是使用 styles 而不是 styleUrls 并且需要 SCSS 和像 webpack 这样的打包器:

styles: [require('style.scss')]

上面应该可以，但符号不是很好。

最后，我可能会选择

styleUrls: ['style.css']

...并使用 SCSS 进行开发，确保我的 watch/build 任务编译 scss->css 并将 style.css 放在 style.scss 旁边相同的目录(在 dist 中，需要的地方)。因此，您使用 SCSS 而永远不会接触生成的 CSS，这些 CSS 仅供应用使用。