如何在角度项目中找到scss文件的css文件

Question

我已经使用以下命令在 VS Code 中创建了 Angular 项目。

ng new my-app --style=scss

关注这个github link

现在使用 angular-cli 创建的每个样式表的扩展名都是 .scss 而不是 .css

现在需要检查 Sass 是如何转换为 css 的，因为我是 Sass 的新手。我在设计中遇到了一些问题，因此查看 css 文件对我来说会很好。

我已经在那些存在 scss 文件的文件夹中进行了搜索，但我找不到 css 文件。请帮忙

更新

看这张图，当我使用cli创建组件时，它创建了.scss而不是css，所以我需要查找css文件。

Answer 1

我已经能够找到一种方法来查看我编译的.scss 文件作为.css 文件。 在我从 Chrome 中检查时只看到原始的 .scss 文件之前。

诀窍是在angular.json 文件中设置一些标志，这样它就会告诉webpack（angular-cli 使用什么来构建应用程序）我希望.scss 文件作为.css 以及源映射文件：

./angular.json

{
  ...
  "projects": {
    "my-prject": { <-- or whatever your project is named
      "architect": {
        "configurations": {
          "production": { // <-- production is default, you might be working w/ custom configurations [development, test, w/e]
            ...
            "sourceMap": true, <-- will serve source maps w/ the file so you can view it in the browser easily
            "extractCss": true, <-- actually serve the .css files and not the .scss files
            ...
          }
        }
      }
    }
  }
}

更新后，重新启动开发服务器或重建您的应用程序 然后您可以进入 chrome 开发工具并查看找到 styles.css 文件（或您将文件名设置为的任何文件）并查看它：

Answer 2

当您编译和构建项目时，Angular 2 中的 Sass 总是在运行时转换为 Css。但是，如果您使用 Gulp 任务和监视等任何其他环境，则可以运行 'sass --watch input.scss output.css'

Answer 3

正如人们已经提到的，css 是在运行时构建的。您仍然可以在 chrome 或 firefox 中使用检查来设置结果。

Answer 4

当您发现有问题并且 Chrome Inspector 帮不上忙时，检查生成的 CSS 绝对是一项要求！所以这绝对是一个好问题，这就是我来这里的原因。

总而言之，@y_vyshnevska 是对的，“您可能会在 head 末尾的脚本标签中发现您的 css 内联”，并且他还提供了一个深入的链接：https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 关于该主题。我把它放在这里以防你忽略它。

Answer 5

看起来无法在运行时查看已编译的 css 文件。

但是，您可以使用以下技巧：angular 使用 <style> 属性应用组件的样式。在元素检查器中找到你需要的那个（你可以使用ctrl (or cmd) + f在那里搜索。

找到所需的样式表后，您会看到它已被截断。要查看全部内容，请单击样式元素并选择“存储为全局变量”。之后在控制台运行

copy(Object.values(temp1.sheet.cssRules).map(r => r.cssText).join('\n'))

这会将所有 css 复制到您的缓冲区

Answer 6

当您执行 npm start 时，css 将被编译。所以你不必担心转换