Laravel mix postcss не переносит файлы

Обновлено: 05.07.2024

Laravel 8 · Компиляция веб-активов с помощью Mix

Laravel Mix – это пакет, разработанный создателем Laracasts Джеффри Уэй, предлагает гибкий API для определения шагов сборки Webpack для вашего приложения с использованием нескольких распространенных препроцессоров CSS и JavaScript.

Другими словами, Mix упрощает компиляцию и минимизацию файлов CSS и JavaScript вашего приложения. Посредством простой цепочки методов вы можете гибко определять свой сценарий по сборки веб-актива. Например:

Если вы однажды были сбиты с толку и ошеломлены, начав работу с Webpack, то вам понравится Laravel Mix. Однако от вас не требуется использовать его при разработке приложения; вы можете использовать любой желаемый инструмент сборки, или даже не использовать его вовсе. Справедливо и обратное: вы можете использовать Laravel Mix без привязки вашего приложения к фреймворку Laravel.

Если вам нужно начать разработку приложения с помощью Laravel и Tailwind CSS, ознакомьтесь с одним из наших стартовых комплектов приложения.

Установка и настройка

Перед запуском Mix вы должны сначала убедиться, что на вашем компьютере установлены Node.js и NPM:

Вы можете легко установить последнюю версию Node и NPM с помощью простых графических установщиков с официального веб-сайта Node. Или, если вы используете Laravel Sail, вы можете вызывать Node и NPM через Sail:

Установка Laravel Mix

Единственный оставшийся шаг – установить Laravel Mix. В свежей установке Laravel вы найдете файл package.json в вашем корневом каталоге. Файл package.json по умолчанию уже включает в себя все, что вам нужно для начала работы с Laravel Mix. Думайте об этом файле как о вашем файле composer.json , за исключением того, что он определяет зависимости Node вместо зависимостей PHP. Вы можете установить зависимости, на которые он ссылается, запустив:

Mix – это слой конфигурации поверх Webpack, поэтому для запуска задач Mix вам нужно только выполнить один из сценариев NPM, который содержится в файле package.json по умолчанию. Когда вы запускаете сценарии dev или production , все исходники активов CSS и JavaScript вашего приложения будут скомпилированы и помещены в каталог public приложения:

Наблюдение за изменениями исходников веб-активов

Команда npm run watch продолжит работу в консоли и будет следить за изменениями во всех соответствующих файлах CSS и JavaScript. Webpack автоматически перекомпилирует ваши исходники, когда обнаружит изменение в одном из этих файлов:

Webpack может не обнаруживать изменения ваших файлов в определенных локальных средах разработки. Если это наблюдается в вашей системе, рассмотрите возможность использования команды watch-poll :

Работа с таблицами стилей

Файл webpack.mix.js вашего приложения является отправной точкой для компиляции всех веб-активов. Думайте об этом как о легкой конфигурационной обертке вокруг Webpack. Задачи Mix можно объединить в цепочку при определении того, как должны быть скомпилированы ваши веб-активы.

Tailwind CSS – это современный, низкоутилитарный фреймворк для создания удивительных сайтов, не покидая HTML-разметку. Давайте рассмотрим, как начать использовать его в проекте Laravel совместно с Mix. Во-первых, мы должны установить Tailwind с помощью NPM и сгенерировать наш конфигурационный файл Tailwind:

Команда init сгенерирует файл tailwind.config.js . В этом файле вы можете настроить пути ко всем шаблонам вашего приложения и JavaScript, чтобы Tailwind мог очистить неиспользуемые стили при оптимизации CSS для эксплуатационного окружения:

Затем вы должны добавить каждый из «слоев» Tailwind в файл resources/css/app.css вашего приложения:

После того, как вы указали необходимые слои Tailwind, необходимо обновить файл webpack.mix.js вашего приложения, чтобы скомпилировать ваш CSS, использующий Tailwind:

Наконец, вы должны указать свою таблицу стилей в основном шаблоне макета вашего приложения. Многие разработчики приложений предпочитают хранить этот шаблон в resources/views/layouts/app.blade.php . Кроме того, убедитесь, что вы добавили метатег viewport , если он еще не присутствует:

PostCSS – мощный инструмент для преобразования вашего CSS, включен в Laravel Mix из коробки. По умолчанию Mix использует популярный плагин Autoprefixer для автоматического применения всех необходимых префиксов CSS3. Однако вы можете добавлять любые дополнительные плагины, подходящие для вашего приложения.

Сначала установите нужный плагин через NPM и включите его в свой массив плагинов при вызове метода postCss Mix. Метод postCss принимает путь к вашему файлу CSS в качестве первого аргумента, а в качестве второго аргумента – каталог, в который следует поместить скомпилированный файл:

Или вы можете выполнить postCss без дополнительных плагинов, чтобы получить простую компиляцию и минификацию CSS:

Метод sass позволяет вам скомпилировать Sass в CSS, понятный веб-браузерам. Метод sass принимает путь к вашему файлу Sass в качестве своего первого аргумента и каталог, в который должен быть помещен скомпилированный файл, в качестве второго аргумента:

Вы можете скомпилировать несколько файлов Sass в отдельные файлы CSS и даже настроить каталог назначения результирующего CSS, вызывая метод sass несколько раз:

Поскольку Laravel Mix построен поверх Webpack, важно понимать несколько концепций Webpack. Для компиляции CSS Webpack перезапишет и оптимизирует любые вызовы url() в ваших таблицах стилей. Хотя поначалу это может показаться странным, это невероятно мощная функциональность. Представьте, что мы хотим скомпилировать Sass, который включает относительный URL-адрес изображения:

По умолчанию Laravel Mix и Webpack найдут example.jpg , скопируют его в вашу папку public/images , а затем перепишут url() в созданной вами таблице стилей. Таким образом, ваш скомпилированный CSS будет:

Какой бы полезной ни была эта функция, возможно, что ваша существующая структура папок уже настроена так, как вам нравится. В этом случае вы можете отключить перезапись url() следующим образом:

После добавления этой записи в ваш файл webpack.mix.js , Mix больше не будет сопоставлять какой-либо url() или копировать веб-активы в ваш публичный каталог. Другими словами, скомпилированный CSS будет выглядеть так же, как вы его изначально указали:

Карты исходников CSS

Хотя по умолчанию они отключены, карты исходников могут быть активированы путем вызова метода mix.sourceMaps() в вашем файле webpack.mix.js . Хоть это и связано с затратами на компиляцию / производительность, но, в свою очередь, предоставит дополнительную отладочную информацию в инструментах разработчика вашего браузера при использовании скомпилированных веб-активов:

Стиль сопоставления исходников

Webpack предлагает множество стилей сопоставления исходников. По умолчанию стиль сопоставления исходников Mix установлен как eval-source-map , что обеспечивает быстрое время перестроения. Если вы хотите изменить стиль сопоставления, то вы можете сделать это с помощью метода sourceMaps :

Работа с JavaScript

Mix содержит несколько функций, которые помогут вам работать с вашими файлами JavaScript, например, компиляция современного ECMAScript, объединение модулей, минификация и объединение простых файлов JavaScript. Более того, все это работает без проблем, не требуя ни унции специального конфигурирования:

Теперь, с помощью одной строчки кода вы можете воспользоваться следующими преимуществами:

синтаксис современного EcmaScript.
модули
минификация для эксплуатационного режима.

Mix автоматически установит плагины Babel, необходимые для поддержки компиляции однофайловых компонентов Vue при использовании метода vue . Никакой дополнительной настройки не требуется:

После того, как ваш JavaScript скомпилирован, вы можете ссылаться на него в своем приложении:

Mix автоматически установит плагины Babel, необходимые для поддержки React. Для начала добавьте вызов метода react :

За кулисами Mix загрузит и включит соответствующий плагин babel-preset-react Babel. После того, как ваш JavaScript скомпилирован, вы можете ссылаться на него в своем приложении:

Извлечение сторонних библиотек

Одним из потенциальных недостатков объединения всего кода JavaScript для конкретного приложения со сторонними библиотеками, такими как React и Vue, является то, что это затрудняет долгосрочное кеширование. Например, одно обновление кода вашего приложения заставит браузер повторно загрузить все сторонние библиотеки, даже если они не изменились.

Если вы намереваетесь часто обновлять JavaScript своего приложения, вам следует рассмотреть возможность извлечения всех сторонних библиотек в их собственный файл. Таким образом, изменение кода вашего приложения не повлияет на кеширование вашего большого файла vendor.js . Метод extract Mix делает это проще простого:

Метод extract принимает массив всех библиотек или модулей, которые вы хотите извлечь в файл vendor.js . Используя приведенный выше фрагмент в качестве примера, Mix сгенерирует следующие файлы:

public/js/manifest.js : The Webpack manifest runtime
public/js/vendor.js : Your vendor libraries
public/js/app.js : Your application code

Чтобы избежать ошибок JavaScript, обязательно загружайте эти файлы в правильном порядке:

Пользовательская конфигурация Webpack

Иногда требуется дополнительные изменения базовой конфигурации Webpack. Например, у вас может быть специальный загрузчик или плагин, на который нужно сослаться.

Mix содержит полезный метод webpackConfig , который позволяет вам объединить небольшие переопределения конфигурации Webpack. Это особенно привлекательный вариант, поскольку он не требует от вас копирования и поддержки вашей собственной копии файла webpack.config.js . Метод webpackConfig принимает объект, который должен содержать любую специфичную для Webpack конфигурацию, которую вы хотите применить.

Версионирование / очистка кеша

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

Метод version добавит уникальный хеш к именам файлов всех скомпилированных исходников, что сделает очистку кеша более удобной:

После создания файла версионирования вы не узнаете его точное имя. Итак, вы должны использовать глобальную функцию mix Laravel в вашем шаблоне для загрузки хешированного веб-актива. Глобальная функция mix фреймворка Laravel автоматически определит текущее имя хешированного файла:

Поскольку файлы с поддержкой версий обычно нужны только в эксплуатационном окружении, вы можете указать, чтобы процесс управления версиями выполнялся только во время запуска npm run prod :

Изменение базовых URL-адресов с помощью Mix

Если ваши скомпилированные веб-активы Mix развернуты отдельно от вашего приложения в CDN, то вам нужно будет изменить базовый URL-адрес, генерируемый функцией mix . Вы можете сделать это, добавив параметр mix_url в конфигурационный файл config/app.php вашего приложения:

После указания URL-адреса, функция mix будет подставлять указанный префикс при создании URL-адресов для веб-активов:

Перезагрузка с помощью Browsersync

BrowserSync может автоматически отслеживать изменения в ваших файлах и вносить изменения в браузер, не требуя обновления страницы вручную. Вы можете включить эту поддержку, вызвав метод mix.browserSync() :

Параметры BrowserSync можно указать путем передачи объекта JavaScript в метод browserSync :

Затем запустите сервер разработки Webpack с помощью команды npm run watch . Теперь, когда вы изменяете скрипт или файл PHP, вы можете наблюдать, как браузер мгновенно обновляет страницу, чтобы отразить ваши изменения.

Вы можете использовать переменные окружения в своем webpack.mix.js , добавив к одной из переменных префикс MIX_ в вашем файле .env :

После того, как переменная была определена в вашем файле .env , вы можете получить к ней доступ через объект process.env . Однако, вам нужно будет перезапустить задание, если значение переменной среды изменится во время ее выполнения:

Когда доступно, Mix будет автоматически отображать уведомления ОС при компиляции, давая вам мгновенную информацию о том, была ли компиляция успешной или нет. Однако, могут быть случаи, когда вы предпочтете отключить эти уведомления. Одним из таких примеров может быть запуск Mix на вашем рабочем сервере. Уведомления можно отключить с помощью метода disableNotifications :

Laravel Mix предоставляет свободный API для определения шагов сборки Webpack для вашего приложения Laravel с использованием нескольких распространенных препроцессоров CSS и JavaScript. С помощью простой цепочки методов вы можете свободно определить свой конвейер активов. Например:

Если вы когда-либо были сбиты с толку и ошеломлены началом работы с Webpack и компиляцией ресурсов, вам понравится Laravel Mix. Однако вы не обязаны использовать его при разработке приложения; Вы можете свободно использовать любой инструмент конвейера активов, который вы хотите, или даже вообще не использовать.

Установка и настройка

Установка узла

Перед запуском Mix вы должны убедиться, что Node.js и NPM установлены на вашем компьютере.

По умолчанию Laravel Homestead включает в себя все, что вам нужно; однако, если вы не используете Vagrant, вы можете легко установить последнюю версию Node и NPM, используя простые графические установщики со страницы их загрузки .

Laravel Mix

Единственным оставшимся шагом является установка Laravel Mix. В новой установке Laravel вы найдете файл в корне вашей структуры каталогов. Файл по умолчанию включает в себя все, что вам нужно для начала. Думайте об этом как о вашем файле, за исключением того, что он определяет зависимости Node вместо PHP. Вы можете установить зависимости, на которые он ссылается, запустив: package.json package.json composer.json

Начало Mix

Mix - это слой конфигурации поверх Webpack , поэтому для запуска задач Mix вам нужно всего лишь выполнить один из сценариев NPM, который включен в файл Laravel по умолчанию : package.json

Наблюдение за активами за изменениями

Команда npm run watch продолжит работу в вашем терминале и будет следить за изменениями во всех соответствующих файлах. Затем Webpack автоматически перекомпилирует ваши активы, когда обнаружит изменение:

Вы можете обнаружить, что в некоторых средах Webpack не обновляется при изменении ваших файлов. Если это так в вашей системе, попробуйте использовать команду: watch-poll

Работа с таблицами стилей

Этот файл является вашей точкой входа для всей компиляции активов. Думайте об этом как обертку легкой конфигурации вокруг Webpack. Смешанные задачи могут быть объединены в цепочку, чтобы точно определить, как должны компилироваться ваши ресурсы. webpack.mix.js

Этот less метод может быть использован для компиляции Less в CSS. Давайте скомпилируем наш основной файл в . app.less public/css/app.css

Несколько вызовов less метода могут быть использованы для компиляции нескольких файлов:

Если вы хотите настроить имя файла скомпилированного CSS, вы можете передать полный путь к файлу в качестве второго аргумента less метода:

Если вам нужно переопределить базовые параметры плагина Less , вы можете передать объект в качестве третьего аргумента : mix.less()

sass метод позволяет компилировать Sass в CSS. Вы можете использовать метод следующим образом:

Опять же, как и less метод, вы можете скомпилировать несколько файлов Sass в свои собственные соответствующие файлы CSS и даже настроить выходной каталог полученного CSS:

В качестве третьего аргумента могут быть предоставлены дополнительные параметры плагина Node-Sass :

Stylus

Подобно Less и Sass, stylus метод позволяет вам скомпилировать Stylus в CSS:

Вы также можете установить дополнительные плагины Stylus, такие как Rupture . Сначала установите соответствующий плагин через NPM ( npm install rupture ), а затем потребуйте его при вызове : mix.stylus()

PostCSS

PostCSS , мощный инструмент для преобразования вашего CSS, входит в состав Laravel Mix из коробки. По умолчанию Mix использует популярный плагин Autoprefixer для автоматического применения всех необходимых префиксов вендора CSS3. Тем не менее, вы можете добавить любые дополнительные плагины, которые подходят для вашего приложения. Сначала установите нужный плагин через NPM, а затем укажите его в своем файле: webpack.mix.js

Plain CSS

Если вы просто хотите объединить несколько простых таблиц стилей CSS в один файл, вы можете использовать этот styles метод.

URL Processing

Поскольку Laravel Mix построен поверх Webpack, важно понимать несколько концепций Webpack. Для компиляции CSS Webpack перепишет и оптимизирует любые вызовы в ваших таблицах стилей. Хотя это может показаться странным, но это невероятно мощный функционал. Представьте, что мы хотим скомпилировать Sass, который включает относительный URL-адрес изображения: url()

По умолчанию Laravel Mix и Webpack найдут , скопируют его в вашу папку, а затем перепишут в созданной вами таблице стилей. Таким образом, ваш скомпилированный CSS будет: example.jpg public/images url()

Как бы ни была полезна эта функция, возможно, существующая структура папок уже настроена так, как вам нравится. Если это так, вы можете отключить переписывание следующим образом: url()

С этим дополнением к вашему файлу Mix больше не будет сопоставлять или копировать ресурсы в ваш публичный каталог. Другими словами, скомпилированный CSS будет выглядеть так же, как вы его изначально набрали: webpack.mix.js url()

Source Maps

Хотя исходные карты отключены по умолчанию, их можно активировать, вызвав метод в вашем файле. Несмотря на то, что он требует затрат на компиляцию и производительность, он предоставит дополнительную информацию об отладке инструментам разработчика вашего браузера при использовании скомпилированных ресурсов. mix.sourceMaps() webpack.mix.js

Работа с JavaScript

Mix предоставляет несколько функций, которые помогут вам работать с вашими файлами JavaScript, такими как компиляция ECMAScript 2015, объединение модулей, минификация и объединение простых файлов JavaScript. Более того, все это работает без проблем, не требуя унции пользовательской конфигурации:

С этой единственной строкой кода вы можете теперь воспользоваться:

Синтаксис ES2015.
Модули
Компиляция .vue файлов.
Минификация для производственных сред.

Поставщик извлечения

Одним из потенциальных недостатков связывания всех специфичных для приложений JavaScript с библиотеками вашего поставщика является то, что это затрудняет долгосрочное кэширование. Например, одно обновление кода вашего приложения заставит браузер повторно загрузить все библиотеки вашего поставщика, даже если они не изменились.

Если вы намерены часто обновлять JavaScript своего приложения, вам следует рассмотреть возможность извлечения всех библиотек вашего поставщика в их собственный файл. Таким образом, изменение кода вашего приложения не повлияет на кэширование вашего большого файла. Метод Микс делает это бризом: vendor.js extract

extract Метод принимает массив из всех библиотек или модулей , которые вы хотите извлечь в файл. Используя приведенный выше фрагмент в качестве примера, Mix создаст следующие файлы: vendor.js

public/js/manifest.js : Время выполнения манифеста Webpack
public/js/vendor.js : Библиотеки вашего поставщика
public/js/app.js : Код вашего приложения

Чтобы избежать ошибок JavaScript, обязательно загрузите эти файлы в правильном порядке:

Mix может автоматически установить плагины Babel, необходимые для поддержки React. Для начала замените ваш звонок на : mix.js() mix.react()

За кулисами Mix загрузит и включит соответствующий плагин Babel. babel-preset-react

Подобно объединению таблиц стилей , вы также можете комбинировать и минимизировать любое количество файлов JavaScript с помощью метода: mix.styles() scripts()

Эта опция особенно полезна для устаревших проектов, где вам не требуется компиляция Webpack для вашего JavaScript.

Небольшое изменение есть . Его подпись метода идентична ; однако объединенный файл получит компиляцию Babel, которая переводит любой код ES2015 в ванильный JavaScript, понятный для всех браузеров. mix.scripts() mix.babel() scripts

Пользовательская конфигурация Webpack

За кулисами Laravel Mix ссылается на предварительно сконфигурированный файл, чтобы вы как можно быстрее начали работать. Иногда вам может понадобиться вручную изменить этот файл. У вас может быть специальный загрузчик или плагин, на который нужно сослаться, или же вы предпочитаете использовать Stylus вместо Sass. В таких случаях у вас есть два варианта: webpack.config.js

Слияние пользовательских настроек

Mix предоставляет полезный webpackConfig метод, который позволяет объединять любые короткие переопределения конфигурации Webpack. Это особенно привлекательный выбор, поскольку он не требует от вас копировать и поддерживать свою собственную копию файла. Метод принимает объект, который должен содержать любую Webpack специфической конфигурации , которую вы хотите применить. webpack.config.js webpackConfig

Пользовательские файлы конфигурации

Если вы хотите полностью настроить конфигурацию Webpack, скопируйте файл в корневой каталог вашего проекта. Затем укажите все ссылки в вашем файле на вновь скопированный файл конфигурации. Если вы решите применить этот подход к настройке, любые будущие обновления Up для Mix должны быть вручную объединены в ваш настроенный файл. node_modules/laravel-mix/setup/webpack.config.js --config package.json webpack.config.js

Копирование файлов и каталогов

Этот copy метод может быть использован для копирования файлов и каталогов в новые места. Это может быть полезно, когда конкретный ресурс в вашем node_modules каталоге должен быть перемещен в вашу public папку.

При копировании каталога copy метод сгладит структуру каталога. Чтобы сохранить исходную структуру каталога, вы должны использовать copyDirectory вместо этого метод:

Управление версиями / кеширование

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

После создания версионного файла вы не будете знать точное имя файла. Таким образом, вы должны использовать глобальную mix функцию Laravel в своих представлениях, чтобы загрузить соответственно хешированный актив. mix Функция будет автоматически определять текущее имя хешировано файл:

Поскольку версионные файлы обычно не нужны при разработке, вы можете указать, что процесс версионирования должен выполняться только во время npm run production :

Перегрузка Browsersync

BrowserSync может автоматически отслеживать ваши файлы на наличие изменений и вставлять изменения в браузер без необходимости обновления вручную. Вы можете включить поддержку, вызвав метод: mix.browserSync()

Вы можете передать в этот метод либо строку (прокси), либо объект (настройки BrowserSync). Затем запустите сервер разработки Webpack с помощью npm run watch команды. Теперь, когда вы изменяете скрипт или файл PHP, наблюдайте, как браузер мгновенно обновляет страницу, чтобы отразить ваши изменения.

Переменные среды

Вы можете добавить переменные окружения в Mix, добавив префикс к ключу в вашем .env файле MIX_ :

После того, как переменная была определена в вашем .env файле, вы можете получить доступ через объект. Если значение изменяется во время выполнения задачи, вам необходимо перезапустить задачу: process.env watch

Уведомления

Когда доступно, Mix будет автоматически отображать уведомления ОС для каждого пакета. Это даст вам мгновенную обратную связь относительно того, была ли компиляция успешной или нет. Однако могут быть случаи, когда вы предпочитаете отключать эти уведомления. Одним из таких примеров может быть запуск Mix на вашем производственном сервере. Уведомления могут быть деактивированы с помощью disableNotifications метода.

Перед публикацией этой проблемы выполните следующие действия и убедитесь, что проблема все еще существует. 1. Обновите Laravel Mix до последней версии. 2. Удалите ваши зависимости и переустановите с нуля: `rm -rf node_modules && npm install`. 3. Проверьте свой файл `package.json` и убедитесь, что нет старых зависимостей Laravel Elixir, которые могут мешать работе Mix. 4. Вы используете собственный файл .babelrc? Если это так, это может повлиять на вашу компиляцию, поскольку мы зависим от плагина es2015 с модулями, установленными на false. т

Версия Laravel Mix: 1.0.3
Версия узла ( node -v ): 6.11.0
Версия NPM ( npm -v ): 5.0.3
ОС: Ubuntu 16.04

Описание:

Я импортирую простой файл CSS из node_modules в файл .styl . В 0.12.1 это работало нормально.

Комментируя оператор импорта, проект компилируется нормально.

Полный вывод ошибки на терминал

Действия по воспроизведению:

Все 12 Комментарий

Эта ошибка не возникает, если выполняется в файлах SCSS. Я не пробовал другие препроцессоры

@gMagicScott
Я столкнулся с этой проблемой при обновлении до версии 1.0.0,
Я исправил это, удалив расширение .css из путей.

Работал нормально до v0.12.1

Да, я не могу понять, почему это так. Я знаю, что есть проблема с репозиторием Sass GitHub, связанная с импортом файлов с расширением .css, но это не объясняет, почему она работала в более ранних версиях Mix, а не сейчас.

Кто-нибудь может понять, почему?

@ ankurk91
Удаление расширения не работает с Stylus. Без расширения он будет захватывать только файлы .styl

@JeffreyWay
Судя по моему тестированию, в этом сценарии S (A | C) SS работает правильно. Некоторые из исследований, которые я провел перед тем, как создать здесь проблему, похоже, указывают на ExtractTextPlugin. Было предложение, что я хотел попытаться обернуть всю компиляцию, связанную с CSS, в ExtractText, но я не мог полностью понять, как все правила определены в Mix.

В последней версии 0. * обычный css был импортирован в файлы Stylus, но он был поднят в верхнюю часть вывода вместо того, чтобы быть встроенным там, где был @import .

С тем, как Webpack все извлекает и обрабатывает, я не понимаю, почему должна возникнуть проблема с извлечением любого типа препроцессорного формата, компиляцией и вставкой там, где на него ссылались.

Внезапно возникла та же проблема. Не уверен, что сломалось.

Удаление .css при импорте в файл .scss сработало.

@gMagicScott Эта ошибка

Не уверен, что я неправильно понял, что происходит.

Поскольку я сам не использую postcss , комментирование этой строки кода привело к успешной сборке. Я надеюсь, что это хорошая информация для вас, чтобы изучить ее подробнее, поскольку я не очень хорошо знаком с тем, что делает autoprefixer .

Столкнулся с тем же с МЕНЬШЕ

@ ipa1981 Просто временно удалите расширение файла ".css" при импорте в файл LESS . Он должен работать.

Если вы когда-либо были сбиты с толку и ошеломлены, начав работу с Webpack и компиляцией ресурсов, вам понравится Laravel Mix. Однако от вас не требуется использовать его при разработке приложения; вы можете использовать любой инструмент конвейера активов, какой захотите, или даже не использовать его вовсе.

Установка & Настройка

Установка узла

Перед запуском Mix необходимо сначала убедиться, что на вашем компьютере установлены Node.js и NPM.

По умолчанию Laravel Homestead включает в себя все, что вам нужно; однако, если вы не используете Vagrant, вы можете легко установить последнюю версию Node и NPM с помощью простых графических установщиков со их страницы загрузки .

Микс Laravel

Единственный оставшийся шаг - установить Laravel Mix. В новой установке Laravel вы найдете файл package.json в корне вашей структуры каталогов. Файл по умолчанию package.json включает все необходимое для начала работы. Думайте об этом как о вашем файле composer.json , за исключением того, что он определяет зависимости Node вместо PHP. Вы можете установить зависимости, на которые он ссылается, запустив:

Бегущий микс

Mix - это уровень конфигурации поверх Webpack , поэтому для запуска задач Mix вам нужно только выполнить один из сценариев NPM, который включен в файл Laravel package.json по умолчанию:

Наблюдение за активами на предмет изменений

Команда npm run watch продолжит работу в вашем терминале и будет следить за изменениями во всех соответствующих файлах. Затем Webpack автоматически перекомпилирует ваши ресурсы, когда обнаружит изменение:

Вы можете обнаружить, что в некоторых средах Webpack не обновляется при изменении ваших файлов. Если это так в вашей системе, рассмотрите возможность использования команды watch-poll :

Работа со стилями

Файл webpack.mix.js является отправной точкой для всех компиляций ресурсов. Думайте об этом как о легкой оболочке конфигурации вокруг Webpack. Задачи смешивания можно объединить в цепочку, чтобы точно определить, как следует компилировать ресурсы.

Меньше

Метод less может использоваться для компиляции Less в CSS. Скомпилируем наш первичный файл app.less в public/css/app.css .

Для компиляции нескольких файлов можно использовать несколько вызовов метода less :

Если вы хотите настроить имя файла скомпилированного CSS, вы можете передать полный путь к файлу в качестве второго аргумента метода less :

Если вам нужно переопределить базовые параметры модуля Less , вы можете передать объект в качестве третьего аргумента mix.less() :

Метод sass позволяет вам скомпилировать Sass в CSS. Вы можете использовать такой метод:

Опять же, как и метод less , вы можете скомпилировать несколько файлов Sass в их собственные соответствующие файлы CSS и даже настроить выходной каталог результирующего CSS:

В качестве третьего аргумента могут быть указаны дополнительные параметры подключаемого модуля Node-Sass :

Стилус

Подобно Less и Sass, метод stylus позволяет скомпилировать Stylus в CSS:

PostCSS

PostCSS , мощный инструмент для преобразования вашего CSS, включен в Laravel Mix из коробки. По умолчанию Mix использует популярный плагин Autoprefixer для автоматического применения всех необходимых префиксов поставщиков CSS3. Однако вы можете добавлять любые дополнительные плагины, подходящие для вашего приложения. Сначала установите желаемый плагин через NPM, а затем укажите его в своем файле webpack.mix.js :

Обычный CSS

Если вы просто хотите объединить несколько простых таблиц стилей CSS в один файл, вы можете использовать метод styles .

Обработка URL

Поскольку Laravel Mix построен поверх Webpack, важно понимать несколько концепций Webpack. Для компиляции CSS Webpack перепишет и оптимизирует любые вызовы url() в ваших таблицах стилей. Хотя поначалу это может показаться странным, это невероятно мощная функциональность. Представьте, что мы хотим скомпилировать Sass, который включает относительный URL-адрес изображения:

Какой бы полезной ни была эта функция, вполне возможно, что существующая структура папок уже настроена так, как вам нравится. В этом случае вы можете отключить перезапись url() следующим образом:

С этим добавлением к вашему файлу webpack.mix.js Mix больше не будет сопоставлять какие-либо url() или копировать ресурсы в ваш общий каталог. Другими словами, скомпилированный CSS будет выглядеть так же, как вы его изначально набрали:

Исходные карты

Хотя по умолчанию они отключены, исходные карты можно активировать, вызвав метод mix.sourceMaps() в вашем файле webpack.mix.js . Хотя это связано с затратами на компиляцию /производительность, это предоставит дополнительную отладочную информацию инструментам разработчика вашего браузера при использовании скомпилированных ресурсов.

Стиль сопоставления источников

Webpack предлагает множество стилей сопоставления источников . По умолчанию стиль сопоставления источника Mix установлен на eval-source-map , что обеспечивает быстрое восстановление. Если вы хотите изменить стиль сопоставления, вы можете сделать это с помощью метода sourceMaps :

Работа с JavaScript

Mix предоставляет несколько функций, которые помогут вам работать с вашими файлами JavaScript, например компиляцию ECMAScript 2015, объединение модулей, минификацию и объединение простых файлов JavaScript. Более того, все это работает без проблем, не требуя ни унции специальной конфигурации:

С помощью этой единственной строки кода теперь вы можете воспользоваться:

Синтаксис ES2015.
Модули
Компиляция файлов .vue .
Минификация для производственных сред.

Извлечение поставщиков

Одним из потенциальных недостатков объединения всего кода JavaScript для конкретных приложений с библиотеками вашего поставщика является то, что это затрудняет долгосрочное кэширование. Например, одно обновление кода вашего приложения заставит браузер повторно загрузить все библиотеки вашего поставщика, даже если они не изменились.

Если вы намерены часто обновлять JavaScript своего приложения, вам следует рассмотреть возможность извлечения всех библиотек вашего поставщика в их собственный файл. Таким образом, изменение кода вашего приложения не повлияет на кеширование вашего большого vendor.js файла. Метод Mix extract упрощает задачу:

public/js/manifest.js : Среда выполнения манифеста Webpack
public/js/vendor.js : Библиотеки вашего поставщика
public/js/app.js : Код вашего приложения

Чтобы избежать ошибок JavaScript, обязательно загружайте эти файлы в правильном порядке:

Реагировать

Mix может автоматически устанавливать плагины Babel, необходимые для поддержки React. Для начала замените вызов mix.js() на mix.react() :

Незаметно для себя Mix загрузит и включит соответствующий плагин babel-preset-react Babel.

Vanilla JS

Подобно объединению таблиц стилей с mix.styles() , вы также можете объединить и уменьшить любое количество файлов JavaScript с помощью метода scripts() :

Этот параметр особенно полезен для устаревших проектов, в которых не требуется компиляция Webpack для вашего JavaScript.

Небольшое изменение mix.scripts() - mix.babel() . Его сигнатура метода идентична scripts ; однако объединенный файл получит компиляцию Babel, которая переводит любой код ES2015 в обычный JavaScript, понятный всем браузерам.

Пользовательская конфигурация Webpack

За кулисами Laravel Mix ссылается на предварительно настроенный файл webpack.config.js , чтобы вы могли как можно быстрее приступить к работе. Иногда вам может потребоваться вручную изменить этот файл. У вас может быть специальный загрузчик или надстройка, на которые нужно сослаться, или, может быть, вы предпочитаете использовать Stylus вместо Sass. В таких случаях у вас есть два варианта:

Объединение пользовательской конфигурации

Mix предоставляет полезный метод webpackConfig , который позволяет объединить любые короткие переопределения конфигурации Webpack. Это особенно привлекательный вариант, поскольку он не требует от вас копирования и сохранения вашей собственной копии файла webpack.config.js . Метод webpackConfig принимает объект, который должен содержать любую конфигурацию Webpack , которую вы хотите применить.

Пользовательские файлы конфигурации

Если вы хотите полностью настроить конфигурацию Webpack, скопируйте файл node_modules/laravel-mix/setup/webpack.config.js в корневой каталог вашего проекта. Затем укажите все ссылки --config в вашем файле package.json на только что скопированный файл конфигурации. Если вы выберете этот подход к настройке, любые будущие апстримовые обновления webpack.config.js Mix должны быть вручную объединены в ваш настроенный файл.

Копирование файлов & Каталоги

Метод copy может использоваться для копирования файлов и каталогов в новые места. Это может быть полезно, когда конкретный ресурс из каталога node_modules необходимо переместить в папку public .

При копировании каталога метод copy сглаживает структуру каталога. Чтобы сохранить исходную структуру каталога, вы должны вместо этого использовать метод copyDirectory :

Управление версиями /блокировка кеша

Метод version автоматически добавляет уникальный хеш к именам файлов всех скомпилированных файлов, что позволяет более удобно очистить кеш:

После создания версионного файла вы не узнаете точное имя файла. Итак, вы должны использовать глобальную функцию Laravel mix в ваших представлениях , чтобы загрузить соответствующим образом хешированный ресурс. Функция mix автоматически определит текущее имя хешированного файла:

Поскольку файлы с контролем версий обычно не нужны при разработке, вы можете указать, чтобы процесс управления версиями выполнялся только во время npm run production :

Базовые URL пользовательского микса

Если ваши скомпилированные ресурсы Mix развернуты в CDN отдельно от вашего приложения, вам нужно будет изменить базовый URL, созданный функцией mix . Вы можете сделать это, добавив параметр конфигурации mix_url в файл конфигурации config/app.php :

После настройки смешанного URL-адреса функция mix добавит префикс настроенного URL-адреса при создании URL-адресов для ресурсов:

Перезагрузка Browsersync

BrowserSync может автоматически отслеживать изменения в файлах и вносить изменения в браузер без необходимости обновления вручную. Вы можете включить поддержку, вызвав метод mix.browserSync() :

В этот метод можно передать строку (прокси) или объект (настройки BrowserSync). Затем запустите сервер разработки Webpack с помощью команды npm run watch . Теперь, когда вы изменяете скрипт или файл PHP, наблюдайте, как браузер мгновенно обновляет страницу, чтобы отразить ваши изменения.

Переменные среды

Вы можете вставить переменные среды в Mix, добавив к ключу в файле .env префикс MIX_ :

После того, как переменная была определена в вашем файле .env , вы можете получить к ней доступ через объект process.env . Если значение изменяется во время выполнения задачи watch , вам необходимо перезапустить задачу:

Уведомления

Если доступно, Mix будет автоматически отображать уведомления ОС для каждого пакета. Это даст вам мгновенную информацию о том, была ли компиляция успешной или нет. Однако могут быть случаи, когда вы предпочтете отключить эти уведомления. Одним из таких примеров может быть запуск Mix на вашем рабочем сервере. Уведомления можно отключить с помощью метода disableNotifications .

Если не указано иное, согласие на содержание этой страницы разрешено. CC BY 4.0.

Читайте также: