我的大多数网站都将Bulma类用于某些全局UI样式，并且我想继续在组件中使用这些类，但是还能够为那些组件定义CSS模块，以针对每个组件进行自定义调整
因此，我在项目中添加了babel-plugin-react-css-modules，这使我可以在className中使用Bulma类，并将模块类放入styleName中。好的，有点，但是可以用。我在CSS目录中有一个global-styles.scss文件，该文件正在加载到我的主要应用程序组件中。这是我导入Bulma的地方，并且定义了我自己的任何全局样式。
我的问题是，当我的全局样式和模块样式全部粉碎在一起（通过css-modules？）并注入头部的样式标签（通过style-loader？）时，我的模块样式首先被定义，然后是我的整体风格。
我觉得模块样式在本地范围内，并且应该始终优先（最后加载），即使我在同一组件中同时加载全局样式和范围样式也是如此。例如，在一个组件中，我正在使用Bulma的.navbar类，但是我还在CSS模块中为该组件定义了自己的.navbar类，并且我将两者都应用于同一元素在我的组件中。
无论如何，我是否可以指定构建样式标签的顺序？在所有这些插件之间，我只是迷路了，然后当您将Gatsby的插件抽象放在其顶部时，这一切都非常混乱。
答案 0 :(得分：0)
我不确定导致问题的原因，但似乎与盖茨比有关。
https://www.gatsbyjs.org/tutorial/part-two/#component-css
提示：教程的这一部分重点介绍了开始设计Gatsby网站样式的最快，最直接的方法-使用gatsby-browser.js直接导入标准CSS文件。在大多数情况下，添加全局样式的最佳方法是使用共享的布局组件。
他们推荐的方法是将全局文件导入布局组件中。这是在我的模块之后加载我的全局变量。但是，创建一个gatsby-browser.js文件并导入我的全局变量会按预期的顺序加载样式。