Блог

Я использую Rails 7 с Webpacker 6. Цель состоит в том, чтобы стили для раздела администратора сайта были отделены от стилей для остальной части приложения. Таблицы стилей из обеих областей будут использовать Bootstrap.

В app/packs/entrypoints/application.js:

 import "../stylesheets/application"
 

приложение/пакеты/таблицы стилей/application.scss содержит:

 @import 'bootstrap';
 

Теперь для таблиц стилей только для администратора. В app/packs/entrypoints/admin.js:

 import "../stylesheets/admin/"
 

И приложения/пакеты/таблицы стилей/администратор/индекс.scss:

 @import 'admin';
 

В моем макете rails для раздела администратора я импортирую стили со следующими:

 stylesheet_pack_tag 'application', 'admin'
 

Но это не будет компилироваться. Вот в чем ошибка:

 ERROR in ./app/packs/stylesheets/admin/index.scss
webpacker | Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
webpacker | ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
webpacker | SassError: Undefined mixin.
webpacker |    ╷
webpacker | 51 │ ┌     @include media-breakpoint-up(md) {
webpacker | 52 │ │       max-width: 80%;
webpacker | 53 │ └     }
 

Поэтому я пытаюсь загрузить и application.css, и admin.css в макет, но компиляция завершается ошибкой администратора, так как он не может «видеть» точки останова начальной загрузки.

Если я импортирую загрузочную программу в файл app/packs/stylesheets/admin/index.scss, она будет работать правильно. Но это, похоже, противоречит цели — я не хочу загружать CSS начальной загрузки дважды.

Есть ли лучший способ сделать это? Я пытаюсь сделать эти CSS-файлы меньше и более модульными.