如何从 ng-build 中排除 sass 文件？答案

【问题标题】：How to Exclude sass files from ng-build?如何从 ng-build 中排除 sass 文件？
【发布时间】：2017-12-11 10:16:57
【问题描述】：

我在 webpack.config 中使用 sass-loader 将 scss 文件编译为一个捆绑的缩小 CSS 文件，我将在“Index.html”中手动引用该文件，但我需要从“ng build”中排除 scss 文件，我在tsconfig.app 中排除它 "exclude": ["../**/*.scss"] 但没用。

【问题讨论】：

只是不要在任何地方引用它，你应该很好。
（假设您使用 Angular CLI）
@tricheriche 抱歉没有得到您的评论.. 不引用它是什么意思？是的，我正在使用 CLI
在您的组件中，在装饰器中，您可以看到styleUrl 属性。您排除的文件不应出现在其中任何一个中。在您的 Angular cli 文件中，您有一个 styles 数组，它也不应该在那里。基本上，从代码中删除对文件的任何引用
@trichetriche 我试过了，也没有用，但即使有效，我在开发过程中也看不到我的风格

标签： angular webpack sass angular-cli

【解决方案1】：

当您使用 Angular CLI 时，它会为您处理所有这些事情。您不需要自己处理它们。 CLI 有意不公开特定于构建工具的扩展点（尽管 CLI 插件系统的想法是 v2 中讨论的内容之一）。

您可以做的一件事是使用ng eject 命令提取 Webpack 配置并自行自定义。阅读有关此选项的更多信息here。

更新：

基于 cmets，看起来这个问题的动机是默认情况下如何在 Angular CLI 中通过 JS 应用 CSS。

如果是这种情况，请注意这可以通过ng build 标志--extract-css 进行配置。如果设置，则构建会生成 CSS 文件而不是 CSS 的 JS 文件。该标志在开发模式下默认关闭（默认ng build / ng serve），在生产模式下默认打开（当您传递-prod 标志时）。

通过the official ng build docs了解更多信息。

【讨论】：

感谢您的回答，现在如果我什至依赖于 CLI，它会将我所有的 scss 文件转换为 js bundlee 文件，但它也会保留全局文件（我在 CLI.json 的样式标签中定义的文件） ) 构建后，所以我最终会在服务器 (.scss) 中得到不必要和未使用的文件
另外，您是否建议依赖CLI或弹出我的项目并修改构建，您在使用将样式文件转换为js文件的想法时遇到任何问题（性能，调试）。跨度>
我建议您只使用 CLI 提供的内容。通过 JS 完成 CSS 没有问题，但在生产模式下，CLI 无论如何都会生成一个 CSS 文件。它不会在开发模式下执行此操作，因为它会增加构建时间，但它有一个标志--extract-css。见github.com/angular/angular-cli/wiki/build
我试过你的 cmets 并且它可以工作，但直到现在 .scss 文件仍然出现在构建中，特别是我在 angulatcli.json 的全局样式标签中定义的文件，我尝试排除但没有用，我为此打开错误，但我不知道它是否是有效错误github.com/angular/angular-cli/issues/6906
不应有 SCSS 文件，除非您在 .angular-cli.json 中的 assets（而不是 styles）中定义它们。尝试一个简单的项目ng new test --style=scss、cd test、ng build -prod，然后检查dist 文件夹。