Laravel Mix: скомпилируйте Sass в.css и min.css

Question

Я пробежал головой об стену здесь.

Для моего проекта я бы хотел, чтобы Laravel Mix/webpack скомпилировал .scss-файл в два файла, обычный, не минимизированный (расширенный или вложенный) .css-файл и минимизированный (сжатый) .min.css-файл, так что по сути у меня есть оба файла.

Я пробовал с:

mix.sass('src', 'output')
   .copy('output.css', 'output.min.css')
   .minify('output.min.css');

Однако это приводит к ошибке, потому что .css-файл не был скомпилирован.

Я знаю, что Laravel Mix сокращается при запуске npm run production но меня интересуют два файла, а не только один production компилируется в.

Есть ли способ сделать это, не изменяя всю конфигурацию веб-пакета?

Answer 1

Я нашел ответ, связавшись с несколькими вещами, и пришел к выводу, что я не собираюсь использовать Laravel Mix. productionСценарий для этого. Я не смог найти способ для Laravel Mix не минимизировать обычный CSS при запуске npm run production, тем не мение, production был необходим для minify() работать, так как это не минимизирует, если среда development,

Поэтому я вытащил пакет, который минимизируется по команде. Это где minifier() приходит на помощь.

npm install --save-dev minifier

Тогда мой webpack.mix.js выглядит так:

let mix = require('laravel-mix');
let minifier = require('minifier');

mix.sass('src/sass/app.scss', 'public/css/', {
    outputStyle: 'nested'
});

mix.then(() => {
    minifier.minify('public/css/app.css')
});

mix.then() срабатывает, когда webpack заканчивает сборку, и .minify() автоматически создаст новый файл с именем app.min.css,

Затем, когда я бегу npm run dev, мой Sass будет скомпилирован во вложенном формате, и он также будет минимизирован. Не самое элегантное решение, но это лучшее, что я мог придумать.

И эй, если это глупо, но это работает, это не глупо. Я имею в виду, что процессор - это буквально скала, о которой мы обманули ¹.

Answer 2

Ты можешь попробовать это

mix.js('resources/assets/js/bootstrap.js', 'public/js') .sass('resources/assets/sass/bootstrap.scss', 'public/css');

но коротко проверь имя bootstrap.scss в файле

Answer 3

Laravel Mix/Webpack содержит несколько скриптов предварительной сборки в файле package.json. Держите это как:

mix.sass('resources/assets/sass/app.scss', 'public/css');

и когда вы хотите минимизировать CSS npm run production в консоли, в противном случае npm run development,

РЕДАКТИРОВАТЬ: Если вы хотите сделать оба потока sassed и minified сделать это по отдельности:

mix.sass('src', 'output');
mix
.sass('src', 'output')
.minify('output.min.css');

Answer 4

Старый вопрос, но я думаю, что это может помочь:

      /**
 * Tested over Laravel Mix V6 
 */
//If your in development, normally you compile the original css. You can run (npx mix watch) command then start your edits
if(!mix.inProduction()) {
    mix.js( 'src/app.js', 'dist/' )
    .sass('src/output.scss', 'assets/css/output.css');
}

//Then this will run only on production, which will minify the output
if(mix.inProduction()) {
    mix.js( 'src/app.js', 'dist/' )
    .sass('src/output.scss', 'assets/css/output.min.css');
}