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

Question

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

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

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

我觉得模块样式是局部范围的，应该始终优先(最后加载)，即使我在同一个组件中加载全局和范围样式。例如，在一个组件中，我使用 Bulma 的 .navbar类，但我也在定义我自己的 .navbar在我的 CSS 模块中为该组件创建类，并且我将它们应用于组件中的同一个元素。

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

Answer 1

我不完全确定是什么导致了这个问题，但它似乎与 Gatsby 有关。

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

Tip: This part of the tutorial has focused on the quickest and most straightforward way to get started styling a Gatsby site — importing standard CSS files directly, using gatsby-browser.js. In most cases, the best way to add global styles is with a shared layout component.

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