Laravel 5.4 Webpack Mix - 合并SCSS和CSS

Question

有没有办法合并SCSS和CSS？

目前我这样做如下,但它不起作用.下面的代码应该将scss编译成临时目录,然后将其与普通的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');

但没什么.public/css/app.css文件中缺少已编译的SASS.这太烦人了,这么简单的任务,这是不可行的.我能够用elixir - 将scss编译成tmp目录(./resources/tmp),然后使用styles()将其与css文件合并.

我还没有在文档中找到有关路径参数的任何信息 - 我在哪里指定绝对路径,相对于公共目录的位置？

Answer 1

有多种方法可以完成它.我的方法是,(给出你的文件名),替换:

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

有:

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

然后将以下行添加到app.scss中:

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

就是这样.当您下次编译资产时(即 - 通过npm run dev),它应该全部编译.