Блог

У меня есть структура проекта, в которой каждый компонент имеет свой собственный файл SCSS, и я хотел бы, чтобы все они автоматически импортировались в основной app.scss файл проекта, без необходимости перечислять их все по отдельности или обновлять список каждый раз, когда добавляется новый компонент. Я знаю, что объединение нескольких файлов CSS с глобализацией может вызвать проблемы с порядком выбора, но здесь это не проблема.

Я пробовал это с components.scss файлом, импортированным в app.scss :

 mix.styles('resources/views/components/*.scss', 'resources/css/components.scss');
mix.sass('resources/css/app.scss', 'public/css');
 

И это в основном работает.

За исключением того, mix.styles() что выполняется после компиляции Sass, поэтому в итоге components.scss импортируется файл из предыдущего выполнения, а не текущий.

Есть ли способ решить эту проблему? Или есть другой подход, который будет работать?

Поскольку Sass @import не поддерживает глобальные пути app.scss , насколько мне известно, невозможно сделать что-то подобное:

 @import 'resources/views/components/*';
 

Обнаружено, что это можно сделать довольно легко с помощью node-sass-glob-importer, который совместим с реализацией Dart Sass, которую использует Mix:

 const sassGlobImporter = require('node-sass-glob-importer');

mix.sass('resources/css/app.scss', 'public/css', {
    sassOptions: {
        importer: sassGlobImporter(),
    }
});
 

resources/css/app.scss

 @import '../views/components/**/*.scss';