告诉角为`styles.css`而不是`styles.scss`服务

Question

在这个web容器堆栈闪现演示中，如果我们单击Chrome工具中呈现的按钮元素，我们可以看到生成的styles.css。

这是截图。

​

​

当我试图在一个角CLI项目中做同样的事情时，Angular将服务于styles.scss文件，而不是styles.css。

这是截图。

​

​

在使用基于本地CLI的项目时，是否有一种方法可以告诉Angular服务于styles.css而不是styles.scss？

Answer 1

边缘

当您在styles.scss边缘中单击devtools的styles选项卡打开它时，您只需在它呈现给您的样式表上面的选项卡中选择想要的格式。我你看不见，你可以点击>>箭头在下拉列表中显示这个选项。

但是，，您将只看到全局样式。而不是组件样式。

单击右侧的styles.scss：

​

​

在选项卡中选择您喜欢的任何演示文稿：

​

​

铬

转到devtools设置并禁用CSS源代码地图。(第二栏，最后一次检查标记旁边。)

​

​

现在，您将只在styles选项卡的右边看到styles.css。

​

​

Answer 2

以下是一些想法：

1. 生成项目时，可以告诉它使用CSS而不是SCSS。可能有一种方法可以将项目从SCSS切换到Angular.json中的CSS。
2. 如果您创建并部署了一个产品构建；它不应该包含源代码映射；因此，您可能会在开发人员工具中看到CSS文件。

Answer 3

如果我正确理解，您将根据运行的配置尝试提供不同的样式表。

您可以通过angular.json配置文件配置要包含在角度构建中的哪些全局样式表：

https://angular.io/guide/workspace-config#styles-and-scripts-configuration

您可以通过创建在本地运行项目的配置并将.scss文件替换为.css文件来实现这一点。