У меня есть две таблицы стилей, созданные из одних и тех же файлов .scss, которые отличаются только в нескольких местах.Один из них мастер со всеми стилями, а другой пропускает несколько частей здесь и там.Они должны сосуществовать, каждый из них имеет конкретный вариант использования и предназначен для загрузки пользователем.Поскольку веб-пакет сам по себе не будет связывать CSS, мне придется импортировать обе эти таблицы стилей, что означает, что они могут потенциально повлиять на мой сайт.
Мой index.js похож на
import "./master.scss";
import "./specific-case.scss";
Мой webpack.config.js похож на
module.exports = {
...
...
plugins: [
specificCaseExtraction,
masterExtraction,
...
Мне бы хотелось, чтобы всеприложение, чтобы использовать стили master.scss, но есть несколько мест, где spceific-case.scss вмешивается в стили, несмотря на то, что они используют один и тот же источник (приоритет довольно хорошо определен с самими листами, но они неМы не можем хорошо играть вместе, что является единственной проблемой в этом демонстрационном приложении и никогда не будет иметь место при правильном использовании.
По сути, мой вопрос сводится к следующему: есть ли способ обеспечить, чтобы одна таблица стилей имела приоритет наддругой?Это вопрос заказа?Я пытался поменять их местами в index.js, но это не помогло, и поменять их местами в webpack.config.js немного сложнее, потому что masterExtraction вызывается вручную, тогда как specificCaseExtraction фактически является одним из многих, которые вводятся динамически.Или, что еще лучше, есть ли способ заставить webpack скомпилировать и упаковать .scss в .css, не вставляя его в саму страницу?
ОБНОВЛЕНИЕ: Оказывается, во времена одинаковой специфичности стиль, которыйдальше вниз по листу - тот, который вступает в силу.Это означает, что изменение порядка плагинов в списке привело к тому, что master.css появился ниже specific-case.css в конечном index.html, что означает, что мастер-стили всегда имеют приоритет над любыми другими имоя проблема решена.