包括带有Angular 4和webpack的全局sass

我有一个基于Angular 4的项目，带有HMR的网页包。不确定这是否重要，但我正在使用ASP Core 2和angular模板

我想做的是在所有组件中应用一个全局/主scss文件。我想用webpack编译这个scss文件，这样它就可以和node_modules文件夹中的其他样式一起交付

我试图实现这一点，但运气不佳。我的主scss文件名为

styles.global.scss

，我试图在

webpack.config.js

文件中包含以下规则

{ 
    test: /\.global\.scss$/, 
    exclude: /node_modules/, 
    use: ['style-loader', 'css-loader', 'sass-loader'] 
}

当我运行应用程序并运行webpack命令时，我没有收到任何错误，但是，我没有看到我的样式被应用。我的node_modules文件夹中的所有资源都已应用，因此至少可以正常工作。我想在我的角度组件上保留视图封装。我希望不必将主/全局scss文件导入每个组件scss文件，也不必将其包含在component.ts文件中的每个

stylesUrl

字段中

如果您需要查看任何其他代码，请告诉我。提前谢谢

编辑：想在问题中包括这一点，以防有人发现自己处于类似的情况。我对.scss文件有另一条规则，它与上面提到的规则直接冲突

{ 
   test: /\.scss$/, 
   exclude: /node_modules/, 
   use: [ 'raw-loader', 'sass-loader' ] 
},

---

听起来你只需要指示Webpack处理你的文件。您可以通过

boot.browser.ts

顶部的导入来实现这一点（假设您使用的是标准设置）：

import./path/to/styles.global.scss'；

更新：根据评论和相应聊天中的进一步讨论，我们发现两条

.scss

规则相互冲突。基于此，更新原始问题中显示的规则可修复此问题：

{
测试：/\.scss$/,，
排除：[/node\u modules/，/\.global\.scss$/]，
用法：[“原始加载程序”、“sass加载程序”]
}

---

这确保了

*.global.scss

文件只处理一次。

听起来您需要指示Webpack处理您的文件。您可以通过

boot.browser.ts

顶部的导入来实现这一点（假设您使用的是标准设置）：

import./path/to/styles.global.scss'；

更新：根据评论和相应聊天中的进一步讨论，我们发现两条

.scss

规则相互冲突。基于此，更新原始问题中显示的规则可修复此问题：

{
测试：/\.scss$/,，
排除：[/node\u modules/，/\.global\.scss$/]，
用法：[“原始加载程序”、“sass加载程序”]
}

这样可以确保只处理一次

*.global.scss

文件