Angular 6项目与Sass

Question

所以，我已经将一个Angular 5项目迁移到Angular 6（好吧，更像是我通过常规迁移和一个新项目重新使用文件，因为一堆问题）。该项目编译并正常工作。

Bu Angular 5版本使用sass而不是常规的css。这应该不是问题：我做了以下更新，以允许Angular 6使用scss文件。

• 在schematics的angular.json与"@schematics/angular:component": { "styleext": "scss" }
• stylein angular.jsonis与"styles": [ "src/styles.scss" ]合作
• 所有css文件都有scss扩展名。
• 所有组件都声明了scss而不是css。

嗯......那没用。我的页面没有样式呈现，而文件似乎正确加载。我错过了什么？

（Angular版本是6.1.10，CLI是6.0.8）

Update 2

• 控制台不会写任何与丢失文件相关的内容。
• 风格元素没有他们的风格。
• 在DevTools中，样式不是源选项卡，但它们也不在Angular 5版本中（尽管它们位于Firefox中的样式编辑器选项卡中）。

Answer 1

问题解决了：在style中scripts和angular.json缺少依赖关系。

Answer 2

你忘了编译scss文件了。

• 做npm install -g sass
• 然后运行sass styles.scss

这将把scss文件转换/编译为css。

你不能将直接的scss文件链接到渲染样式，它必须首先编译为css。