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 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?

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/43051188/laravel-5-4-webpack-mix-merge-scss-and-css