css - 如何在angular元素中查找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 文件(或任何你设置的文件名)并查看它:

如果你在本地工作，那么:

local {
 "sourceMap": true,
  ...
}