How to concat compiled SASS and combined CSS using Laravel Mix?

user_5802381 0
Viewed 2031

In my Laravel project I use both SASS and CSS: SASS used for dependencies (fontawesome, Bootstrap) - via NPM and plain CSS across deep folder structure (BEM). I want to concatenate all CSS, compile SASS and concatenate it all in a single .css file. Same with JS: plain JS files in my BEM structure need to combine with single app.js file which needs to be processed by Webpack. I tried this:

mix.js('resources/assets/js/app.js')
    .scripts('resources/assets/blocks/**/*.js')
    .version('public/js/app.js');

mix.sass('resources/assets/sass/app.scss')
    .styles('resources/assets/blocks/**/*.css')
    .version('public/css/app.css');

But it doesn't work - only manifest file is created:

{
  "/js/app.js": "/js/app.js",
  "/css/app.css": "/css/app.css",
  "/mix.js": "/mix.js"
}
laravel-mix laravel webpack css javascript
1 Answers

Here is an example:

mix.sass('resources/assets/sass/app.scss', 'public/css').styles([
    'node_modules/animate.css/animate.min.css',
    'public/css/app.css'
],'public/css/app.css');
user_92324070
Related