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