Astro (Vite) компилирует отдельные файлы SCSS во внешние файлы CSS для использования в другом проекте. ⇐ Javascript

[Гость]

Я использую Astro npm create astro@latest по умолчанию для создания статической (интерфейсной) демо-версии/прототипа веб-сайта во время разработки.
>
Позже наш бэкэнд-отдел разберет эту статическую HTML-версию и динамически перестроит ее в CMS для производства.
Чего бы мне хотелось [*]Для этого потребуется, чтобы этот демонстрационный сайт внешнего интерфейса Astro «делился» своими ресурсами (активами), такими как CSS, изображения, файлы шрифтов и т. д., с динамической (внутренней) версией CMS. [*]При работе над сайтом Astro (yarn dev или npm dev) было бы здорово, чтобы приведенный ниже пример выполнялся в фоновом режиме. [*]Или, может быть, у вас есть отдельная задача сборки, которую можно запустить позже из package.json? Например, yarn build-prod (npm run build-prod) Структура SCSS проекта
В Astro: у меня есть такая структура SCSS:

/src/styles/base/_variables.scss /src/styles/header.scss /src/styles/footer.scss /src/styles/comComponents/card.scss /src/styles/comComponents/carousel.scss Я бы хотел, чтобы Astro (Vite) скомпилировала каждый файл SCSS в CSS:

/public/styles/header.css /public/styles/footer.css /public/styles/comComponents/card.css /public/styles/comComponents/carousel.css Внутри демонстрационного проекта Astro, в заголовке HTML, мы ссылаемся на эти скомпилированные файлы CSS через HTML и т. д. Примечание. : Я НЕ использую тег внутри файла *.astro.

Я знаю, что на сайте Astro CSS использовать не так. Потому что мы хотели бы ПОДЕЛИТЬСЯ таблицами стилей CSS (и ресурсами) с динамическим веб-сайтом CMS.

Или есть способ извлечь SCSS из каждого файла *.astro в отдельные именованные файлы компонентов, эквивалентные CSS: comComponents/card.astro это SCSS для компоненты/card.css?
Скомпилировать (или скопировать?) в динамическую версию CMS
Чтобы наш динамический сайт CMS мог использовать ОДИНАКОВЫЕ CSS-файлы таблиц стилей; пусть Astro (Vite) также «копирует» (?) файлы CSS и ресурсы в:

/../../external/dir/of/cms/styles/header.css /../../external/dir/of/cms/styles/footer.css /../../external/dir/of/cms/styles/comComponents/card.css /../../external/dir/of/cms/styles/comComponents/carousel.css Пример файла конфигурации Astro Ниже показано, что у меня есть в astro.config.ts, чтобы (Vite?) скомпилировать отдельный *.scss в *.css< /код>. Формируется вывод. Но выходные данные НЕ создают отдельные файлы *.css (компилируется только header.scss). И сама статическая сгенерированная сборка Astro выглядит сломанной/неполной.

import { defineConfig } из 'astro/config'; импортировать isWsl из «is-wsl»; импортировать fg из fast-glob; импортировать {InputOption} из «сборки»; const rootSCSSEntries: InputOption = fg.sync([ './src/styles/**/*.scss', ]).reduce((entryArr, запись) => новый объект({ [entry.split('/').pop() ?? ""]: вход, ...записьАрр }), {}); const inputOptions = { // пример: './src/example.ts', ...rootSCSSEntries } как InputOption; // https://astro.build/config экспортировать default defineConfig({ здравствуйте: { CSS: { параметры препроцессора: { ссс: { дополнительныеДанные: `@import './src/styles/base/_variables.scss';` } } }, плагины: [], сервер: { смотреть: { использоватьПоллинг: isWsl } }, // Установите пустое значение, чтобы избежать предупреждений в Yarn dev оптимизироватьДепс: { включать: [] }, строить: { RollupOptions: { ввод: параметры ввода, выход: { входные имена файлов: '[имя].ts', assetsFileNames: ({ name }) => { if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) { вернуть 'img/[имя][extname]'; } if (/\.(css|scss)$/.test(name ?? '')) { вернуть 'css/[имя][extname]'; } if (/\.(vue|js|ts|ce.vue)$/.test(name ?? '')) { вернуть 'js/[имя][extname]'; } // значение по умолчанию // ссылка: https://rollupjs.org/guide/en/#outputassetfilenames return 'builds/[имя][extname]'; }, // dir: './dist'// Возможно, целью является ../umbraco и т. д... // -m обычно используется в ci/cd каталог: './external/dir/of/cms/styles' } } } } } ); Мне все равно хотелось бы иметь работающий сайт Astro со статической сборкой в ​​./dist (как это обычно бывает). Который до сих пор используется для демонстрационных целей и прототипов.

Спасибо, что дочитали до этого момента. Я знаю, что описанное выше довольно длинное и подробное описание.