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进行开发，确保我的监视/构建任务编译scss-＆gt; css并将style.css放在style.scss旁边的同一目录中（在{{ 1}}，无论在哪里都需要）。因此，您使用SCSS并且永远不会触摸生成的CSS，这只是由应用程序使用。

Answer 2

styleUrls现在必须只有css文件列表，所以你需要提供.css文件的名称来申请组件，这么简单可以考虑提供编译的{{1}的名称来自.css文件的文件，我找到了非常有用的链接，并提供了很好的解释示例：

http://www.angulartypescript.com/angular-2-sass/

这甚至可以长期工作，希望角度2以某种方式支持.scss并在内部编译它。

Answer 3

我建议通过导入添加scss文件：

import＆＃39; style-loader！./ your-scss-file-name.scss＆＃39;;

确保文件网址正确无误。

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

3 个答案: