Question

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

我要做的是拥有一个应用于所有组件的全局/主要scss文件。我想让这个scss文件用webpack编译，所以它与node_modules文件夹中的其他样式一起提供。

我试图实现这一点而没有运气。我的主要scss文件名为today = today.strftime('%Y-%m-%d') annotate( diff_days=DiffDays( (today, F('pub_date')), output_field=DecimalField()) #^^^ ^^^ )，我尝试在styles.global.scss文件中包含以下规则

webpack.config.js

运行应用程序并运行webpack命令时，我没有收到任何错误，但是，我没有看到我的样式被应用。我的node_modules文件夹中的所有资源都被应用，因此至少可以使用。我想在我的角度组件上保持视图封装。我宁愿不必将main / global scss文件导入每个组件scss文件，也不必将它包含在component.ts文件的每个{ test: /\.global\.scss$/, exclude: /node_modules/, use: ['style-loader', 'css-loader', 'sass-loader'] }字段中。

如果您需要查看任何其他代码，请与我们联系。提前谢谢！

编辑：如果有人发现自己处于类似情况，希望将其包括在问题中。我对.scss文件有另一条规则，它与上述规则直接冲突。

stylesUrl

Answer 1

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

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

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

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

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

包含Angular 4和webpack的全局sass

1 个答案: