laravel -mix + sass + glob wildcard импорт - PullRequest
Новая
       69

laravel -mix + sass + glob wildcard импорт

0 голосов
/ 21 января 2020

Справочная информация: импорт глобуса SASS с gulp

В прошлом мы использовали gulp и node-sass-globbing для компиляции наших файлов SASS.

Это позволило использовать подстановочный знак синтаксис, подобный следующему: 

@import "path/*.scss";

Он также поддерживает несколько уровней вложенного импорта.

Backgorund: импорт глобуса SASS с чистым веб-пакетом

Существует ряд решений, доступных для WebPack. Например, [import-glob-loader] (https://www.npmjs.com/package/import-glob-loader Эти решения обычно поставляются с инструкциями конфигурации для чистого веб-пакета.

Конфигурация будет выглядеть немного иначе в laravel -миксе, но его можно заставить работать.

К сожалению, ни один из них не поддерживает импорт вложенных глобусов.

Q1: импорт глобусов SASS с laravel -mix

Мы сейчас используем продукт, который поставляется с laravel -миксом по умолчанию. Мы могли бы вернуться к чистому веб-пакету или проглотить, но мы хотим дать laravel -миксу шанс.

Файл "config" в laravel -микс довольно сильно отличается от того, что мы могли бы найти с чистым веб-пакетом.

Так что я не уверен, будет ли 'import-glob-loader' работать с laravel -миксом, и если да, то как чтобы применить настройки.

Существует также https://github.com/MohamedLamineAllal/laravel-mix-glob, но, похоже, он больше о js, чем SASS. Я не вижу там никакого фрагмента кода об импорте SASS.

EDIT: нашел ответ для Q1.

В конфигурации laravel -mix: 

mix
  [..]
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.scss/,
          loader: 'import-glob-loader'
        }
      ]
    }
  });

Кредиты: https://gist.github.com/arshad/4cade23e5a7f0ac800fa50b691a85568

Q2: глобальное решение, которое работает с импортированными файлами.

main.s css: 

@import my/*.scss

my / hello.s css: 

@import ../my2/*.scss

my2 / hello2.s css: 

body {
  border: 10px solid green;
}

Работает с node-sass-globbing с gulp / node-sass.

Но есть ли решение для laravel -микса ?

Смежные вопросы

Laravel Mix global sass loader Это также о laravel -mix + sass glob, но он не дает столько подробностей о "пакеты, на которые мы смотрели до сих пор". И у него пока нет ответа.

(В худшем случае, если мы закроем это как дубликат, это может дать другому немного ссылочного сока ..)

...