使用 Angular 4 和 webpack 包含全局 sass答案

【问题标题】：Include global sass with Angular 4 and webpack使用 Angular 4 和 webpack 包含全局 sass
【发布时间】：2018-02-22 17:16:01
【问题描述】：

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

我想要做的是拥有一个应用于所有组件的全局/主 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' ] 
},

【问题讨论】：

标签： angular webpack sass

【解决方案1】：

听起来您只需要指示 Webpack 处理您的文件。您可以通过在 boot.browser.ts 顶部的导入来做到这一点（假设您使用的是标准设置）：

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

更新：根据 cmets 和相应聊天中的进一步讨论，我们发现两个 .scss 规则相互冲突。基于此，更新原始问题中显示的规则可以解决问题：

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

这确保*.global.scss 文件只被处理一次。

【讨论】：