Можно ли скомпилировать SCSS в CSS, который используется только на веб-сайте (внешний CSS) или странице (внутренний CSS) ⇐ CSS

[Anonymous]

Обычно я создаю сайты либо на Next.js с внешними файлами CSS (Next.js выполняет компиляцию из внешних файлов SCSS в файлы CSS), либо на статических/CMS-сайтах/модулях/плагинах также с внешними файлами CSS (в в этом случае Gulp выполняет компиляцию из SCSS в файлы CSS).
При таком подходе страница или даже весь сайт будет иметь весь CSS, включенный на все страницы, независимо от того, используется он или нет, что добавляет конечно, до размера страницы
У меня есть «базовая» структура, которую я создал сам, чтобы включать в свои проекты. Моя базовая структура будет иметь множество стилей, подобных приведенным ниже, поэтому я могу выбрать, какой класс мне нужен для определенной ширины браузера (подход в первую очередь для мобильных устройств):

Код: Выделить всё

.hide { display: none; }
@media (min-width: $vsmall) { .hide-vsmall  { display: none; } }
@media (min-width: $small)  { .hide-small   { display: none; } }
@media (min-width: $medium) { .hide-medium  { display: none; } }
@media (min-width: $large)  { .hide-large   { display: none; } }
@media (min-width: $vlarge) { .hide-vlarge  { display: none; } }

Затем я бы использовал такой класс, который скрывал бы этот контент на моей средней точке останова и выше:

Код: Выделить всё

My content

У меня много стилей, подобных приведенному выше, поэтому проблема в том, что все они будут включены на все страницы, на весь сайт, тогда как я могу просто захотеть использовать только один из вышеперечисленных на одной странице. , .hide-medium только на одной странице. Поэтому я бы не стал использовать остальные и не использовал бы их на других страницах, но они будут скомпилированы во внешний CSS.
Мне не нужно использовать внешние таблицы стилей. Это просто потому, что я придерживаюсь старой школы, и в те времена это считалось внутренним, а встроенные стили были плохими. Я думаю, что это могло измениться, но я не уверен, поскольку я не изучал это. Так что, если в наши дни с внутренним CSS все в порядке, я могу переключиться на него.
Если с внутренним CSS все в порядке, то остается проблема, как добавить только используемый CSS из базовые файлы SCSS на внутренние страницы.
Я предпочитаю вообще не использовать встроенные стили, но опять же, если в наши дни это нормально и есть простой способ сделать это, то хорошо.< /p>
Одна из причин, по которой я использую свои собственные фреймворки, заключается в том, что у меня есть только те имена классов, которые я знаю, что могу использовать. Если бы я использовал Bootstrap или аналогичный, я предполагаю, что были бы включены их базовые файлы CSS, которые намного больше моих. Но опять же, возможно, сейчас это изменилось.
Итак, вопрос в том, есть ли какие-либо способы скомпилировать SCSS только для всего сайта во внешние файлы или CSS для конкретной страницы во внутренние (если внутреннее считается нормальным)?
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/783 ... bsite-exte