Webpack 以错误的顺序捆绑 CSS

Question

目前，我的 webpack 正在捆绑我的 CSS 样式，如下所示：

//this css is going first, it's supposed to go last
.rbc-btn {
  color: red;
}
//this css must be first
.myStyle {
  color: green;
}

我想要的是按特定顺序捆绑我的 CSS 样式，如下所示：

.myStyle {
  color: green;
}
.rbc-btn {
  color: red;
}

我该如何使用 webpack 解决这个问题？

谢谢！:)

Answer 1

有一个类似的错误已通过 修复extract-text-webpack-plugin@3.0.0，请确保您使用的是相同版本或更高版本。

如果这没有帮助，一个常见的错误是先加载组件，然后加载 CSS 文件。让每个组件导入自己的样式已经成为一种常见的模式，如果您的组件首先加载，则可以更改 webpack 中的样式顺序。

考虑到你有index.js这样的：

import MyApp from './myApp'
import './myStyle.css'

这意味着 Webpack 会首先加载在 './myApp' 中导入的每个样式，因此应用的样式 'myStyle.css' 将出现在其他样式下方，从而覆盖它们。

解决办法可能只是改变订单

import './myStyle.css' // parent component imports style first
import MyApp from './myApp' // imports your component along with any other styles