我可以告诉 style-loader 在我的 CSS 模块之前加载我的全局 CSS 吗？答案

【问题标题】：Can I tell style-loader to load my global css before my CSS Modules?我可以告诉 style-loader 在我的 CSS 模块之前加载我的全局 CSS 吗？
【发布时间】：2019-01-30 12:44:54
【问题描述】：

我的大部分网站都在我的一些全局 UI 样式中使用 Bulma 类，我想继续在我的组件中使用这些类，但也能够为这些组件定义 CSS 模块，以便自定义每个组件的调整.

因此，我将babel-plugin-react-css-modules 添加到我的项目中，这使我可以在className 中使用我的Bulma 类并将我的模块类放在styleName 中。好吧，有点hacky的感觉，但它的工作。我在 CSS 目录中有一个 global-styles.scss 文件，我将其加载到我的主应用程序组件中。这是我导入 Bulma 并定义我自己的任何全局样式的地方。

我的问题是，当我的全局样式和我的模块样式都被粉碎在一起（通过 css-modules？）并注入头部的样式标签（通过 style-loader？）时，我的模块样式首先被定义，然后是我的全局样式。

我觉得模块样式是本地范围的，应该始终优先（最后加载），即使我在同一个组件中同时加载全局样式和范围样式。例如，在一个组件中，我使用了 Bulma 的 .navbar 类，但我还在我的 CSS 模块中为该组件定义了我自己的 .navbar 类，并且我将两者应用于我的组件中的同一个元素。

无论如何我可以指定构建样式标签的顺序吗？在所有这些插件之间，我只是迷路了，然后当你把 Gatsby 的插件抽象放在上面时，这一切都非常混乱。

【问题讨论】：

标签： reactjs gatsby postcss css-modules babel-plugin-react-css-modules

【解决方案1】：

我不完全确定导致问题的原因，但它似乎与盖茨比有关。

https://www.gatsbyjs.org/tutorial/part-two/#component-css

提示：本教程的这一部分重点介绍了开始设置 Gatsby 网站样式的最快捷、最直接的方法 - 使用 gatsby-browser.js 直接导入标准 CSS 文件。在大多数情况下，添加全局样式的最佳方式是使用共享布局组件。

他们推荐的方法是在布局组件中导入全局文件。这是在我的模块之后加载我的全局变量。但是，创建一个 gatsby-browser.js 文件并在那里导入我的全局变量会按预期顺序加载我的样式。

【讨论】：