CODEWITHSUNDEEP
laravellaravel-5webpacklaravel-mix
super.t
super.t

Reputation: 2746

Laravel 5.4 Webpack Mix - merge SCSS and CSS

Is there any way to merge SCSS and CSS?

Currently, I do it as follows but it doesn't work. The code below is supposed to compile SCSS into a temp directory and then merge it with the plain CSS.

mix.sass('resources/assets/sass/app.scss', '../resources/assets/tmp_compilation_files/scss-assets.css').styles([ 'resources/assets/tmp_compilation_files/scss-assets.css', 'node_modules/isteven-angular-multiselect/isteven-multi-select.css' ], 'public/css/app.css');

but nothing. The compiled SASS is missing in the public/css/app.css file. This is so annoying, such a simple task and it's not doable. I was able to do it with Elixir - compiling SCSS into a tmp directory (./resources/tmp) and then merging it with the CSS files using styles().

I also haven't found any info in the documentation about the path params - where I specify absolute paths, where relative to the public directory?

Upvotes: 6

Views: 4457

Answers (2)

Patrick.SE
Patrick.SE

Reputation: 4564

The way I do it is rename the CSS file to _Name.scss and import it into my main SCSS file.

For example, if I have a vendor sheet named magnific-popup.css, I will rename it to _magnific-popup.scss, then use the CSS import clause:

/*Called in scss entre-point file. (e.g. app.scss)*/
@import "../vendor/magnific-popup.scss"

Then in Laravel Mix I have the original scss method call that combines everything:

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

Following an npm run dev command, I can include the merged result by calling the mix helper method in my <header>:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

Upvotes: 1

alaric
alaric

Reputation: 987

There are multiple ways of accomplishing it. My approach has been to, (given your file names), replace:

mix.sass('resources/assets/sass/app.scss', '../resources/assets/tmp_compilation_files/scss-assets.css').styles([ 'resources/assets/tmp_compilation_files/scss-assets.css', 'node_modules/isteven-angular-multiselect/isteven-multi-select.css' ], 'public/css/app.css');

with:

mix.copy('resources/assets/tmp_compilation_files/scss-assets.css', 'resources/assets/sass/_scss-assets.scss');
mix.copy('node_modules/isteven-angular-multiselect/isteven-multi-select.css', 'resources/assets/sass/_isteven-multi-select.scss');
mix.sass('resources/assets/sass/app.scss', 'public/css');

Then add the following lines into app.scss:

@import "scss-assets";
@import "isteven-multi-select";

And that's it. When you next compile your assets, (i.e. - through npm run dev), it should have all compiled.

Upvotes: 10

Related Questions