Webpack связывает CSS в неправильном порядке
На данный момент мой веб-пакет объединяет мои стили 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;
}
Как я могу исправить это с помощью веб-пакета?
Спасибо! :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Была похожая ошибка, которая была исправлена с [email protected], убедитесь, что вы используете ту же версию или новее.
Если это не помогает, распространенной ошибкой является загрузка сначала компонента, а затем загрузки файлов CSS. Стало обычным делом заставлять каждый компонент импортировать свои собственные стили, которые могут изменить порядок стилей в веб-пакете, если ваш компонент загружается первым.
Учитывая, что у вас есть 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
вы можете использовать mini-css-extract-plugin для webpack 4. имеет тестовый пример для ошибки, с которой вы столкнулись github.com/webpack-contrib/mini-css-extract-plugin/commit/…. также убедитесь, что ваши стили загружены правильно, как я уже упоминал
Я использую webpack 4, который не рекомендуется с
[email protected]. Любое решение для webpack v4?