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），它应该全部编译。

Answer 2

我这样做是将CSS文件重命名为_ Name .scss并将其导入我的主SCSS文件。

例如，如果我有一个名为magnific-popup.css的供应商表，我会将其重命名为_magnific-popup.scss，然后使用CSS import子句：

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

然后在Laravel Mix中我有原始的scss方法调用，它结合了所有内容：

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

在npm run dev命令之后，我可以通过调用<header>中的混合帮助方法来包含合并结果：

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

Laravel 5.4 Webpack Mix - 合并SCSS和CSS

2 个答案: