css - 使用 Sass 的 Angular 6 元素

Question

所以，我已经将 Angular 5 元素迁移到 Angular 6(好吧，更像是我混合了常规迁移和一个新元素，因为一堆问题重新使用这些文件)。该元素可以正常编译和运行。

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

angular.json 中的
• schematics 设置为 "@schematics/angular:component": { "styleext": "scss"}
• style在 angular.json 中设置 "styles": [ "src/styles.scss"]
• 所有 css 文件都有一个 scss 扩展名。
• 所有组件都声明了 scss 而不是 css。

好吧……那没用。我的页面呈现时没有样式，而文件似乎已正确加载。我错过了什么吗？

(Angular版本为6.1.10，CLI为6.0.8)

更新2

• 控制台不会写入与丢失文件或其他相关的任何内容。
• 带样式的元素没有自己的样式。
• 在 DevTools 中，样式不在源选项卡中，但在 Angular 5 版本中也不在其中(尽管它们在 Firefox 中的样式编辑器选项卡中)。

Answer 1

你忘了编译 scss 文件。

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

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

不能直接链接scss文件来渲染样式，必须先编译成css。