Laravel 5.4 Webpack Mix-合并SCSS和CSS [英] Laravel 5.4 Webpack Mix - merge SCSS and CSS

问题描述

有什么办法可以合并SCSS和CSS?

Is there any way to merge SCSS and CSS?

目前，我按以下步骤进行操作，但是它不起作用.下面的代码应该将scss编译到一个临时目录中，然后将其与普通的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');

但是什么也没有. public/css/app.css文件中缺少已编译的SASS.这太烦人了，这么简单的任务，也不可行.我能够用长生不老药做到这一点-将scss编译到tmp目录(./resources/tmp)中，然后使用styles()将其与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?

推荐答案

有多种实现方法.我的方法是(给定文件名)替换:

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

具有:

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中:

Then add the following lines into app.scss:

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

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

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

这篇关于Laravel 5.4 Webpack Mix-合并SCSS和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！