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

Question

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"
}

what if you change all your .css files to .scss (with a script) - Sass will then be able to compile them — Carlos Valencia
– Carlos Valencia, Commented Aug 14, 2017 at 22:39

casieber · Accepted Answer · 2018-01-18 01:24:01Z

5

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');

edited Jan 18, 2018 at 1:24

casieber

7,6122 gold badges23 silver badges35 bronze badges

answered Jan 18, 2018 at 0:58

Kirlled

511 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related