Sass @extend считается импортированным css во время сборки

Question

У меня есть глобальный CSS файл, который содержит все общие c CSS.

Я хочу иметь возможность расширять все классы, присутствующие в этом глобальном файле CSS, в любом из моих файлов S CSS.

Прямо сейчас выдается ошибка. Класса .xyz не существует и сборка завершается неудачно. Я попытался импортировать этот файл, но сборка все равно не удалась.

Добавление! Параметров рядом с классом - это один из способов пройти сборку, но есть ли другой лучший способ?

Немного контекста для Vue пользователей. Я использую VueCli3. Я использую <style lang="scss"> для написания S CSS и хочу использовать расширение здесь. Vue документация , предлагающая добавить prependData для добавления переменных. Я импортировал глобальный CSS в файл S CSS и импортировал этот файл в prependData, но сборка Vue все равно не удалась.

Answer 1

Использование файла @import CSS в файле S CSS не позволяет @ расширить любой класс.

Но вы можете выполнить следующие шаги для расширения класса из вашего чистого css кода.

1. Преобразование .css файла в .scss.
2. импорт этого файла global.scss в другой файл .scss.
3. Затем после того, как вы можете использовать @extend для расширения класс в новом файле.

Если в вашем файле более 1 тыс. строк кода, у него возникнут проблемы с расширением класса.

Answer 2

Похоже, вы хотите глобально включить файл CSS с содержимым, которое блоки S CSS в каждом компоненте могут читать. (Переменные, определения стиля и т. Д. c).

@extend работает как переменная, то есть S CSS требует, чтобы стиль определения был доступен как часть его компиляции. Это значит, что работа с «S CSS Global Variables» должна решить и вашу проблему расширения.

В этом случае вам нужно настроить, как Webpack взаимодействует с вашими компонентами. Вы можете сделать это вручную, как описано здесь . Или я предпочитаю использовать плагин Vue Cli с именем vue -cli-plugin-sass-resources-loader . Убедитесь, что ваш компонент <style> раздел содержит lang="SCSS", хотя я предполагаю, что вы уже делаете это.