时间戳

首页 > 解决方案 > Webpack 以错误的顺序捆绑 CSS

javascript - Webpack 以错误的顺序捆绑 CSS

问题描述

目前，我的 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 解决这个问题？

谢谢！:)

标签： javascriptcsswebpack

解决方案

有一个类似的错误已用 修复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

推荐阅读