Sass 如何在组件中添加scss文件作为样式URL？

我想知道是否可以在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]
})

@View({
模板：`
点击我！
`,
styleUrl:['style.scss']，
指令：[NgClass]
})

将scss文件编译为css是实现我所尝试的目标的唯一方法吗

---

谢谢

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

GET /approot/component/path/style.scss

必须是有效的

文本/css

类型。默认情况下，没有Web服务器会这样做。使用Express、Apache等完全可以，但需要配置

另一种选择是使用

样式

而不是

样式URL

，并要求SCS与webpack:

style:[require（'style.scss'）]

上面的方法应该有效，但符号不是很好

最后，我可能会和你一起去

styleURL:['style.css']

---

。。。并使用SCSS进行开发，确保我的监视/构建任务编译了SCSS->css，并将

style.css

放在同一目录中

style.SCSS

的旁边（在

dist

中，需要的地方）。因此，您使用的是SCS，从不触摸生成的CSS，而生成的CSS只供应用程序使用。

styleURL

目前必须是唯一的CSS文件列表，因此您需要提供

.CSS

文件的名称以应用组件，从

.scss

文件中提供编译的

.css

文件的名称非常简单，我找到了非常有用的链接，并给出了非常详细的示例：

---

这甚至可以长期使用，希望angular 2以某种方式支持

.scss

并在内部编译它。

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

导入“样式加载器！”/您的scss文件名为.scss'

---

确保文件url正确。

将

ng class

更改为

ngClass

您在这里错了。。。您还可以使用此方法添加

.scss

文件

@import“yourfilePath”浏览器不支持scss文件，因此您必须将它们编译为css。您可以加载样式表或使用webpack等工具嵌入样式表。这是可能的，但您需要使服务器能够支持此类文件，例如，在请求期间编译样式表（可能从缓存中预编译），并使用CSS响应。另一种选择是使用
样式
而不是
样式URL
，并要求SCS带有捆绑式网页包：
样式：[require（'style.SCSS'）]
。不是
样式URL
，而是
样式URL
？我在一个单独的npm包中创建ng2组件，然后在我的应用程序中使用它。我有我的
style.scss
文件以及组件源。我尝试了
[require（'./style.scss'）]
和您的代码，但他们都抱怨
找不到模块style.scss
。如何将此scss文件导出到我的应用程序中，以便其网页可以将其与其他源和样式文件一起编译？