Webpack связывает CSS в неправильном порядке

Question

В данный момент мой веб-пакет связывает мои стили 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;
}

Как я могу это исправить с помощью веб-пакета?

Спасибо!:)

Answer 1

Была похожая ошибка, которая была исправлена ​​с помощью extract-text-webpack-plugin@3.0.0, убедитесь, что вы используете ту же версию или более новую.

Если это не помогает, распространенная ошибка - сначала загрузить компонент изатем загрузка файлов CSS.Стало обычным делом заставлять каждый компонент импортировать свои собственные стили, которые могут изменять порядок стилей в веб-пакете, если ваш компонент загружается первым.

Учитывая, что у вас index.js, например:

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

Это означает, что в Webpack каждый стиль, импортированный в.потенциально может быть только изменение заказов

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