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

Answer 2

我这样做的方法是将 CSS 文件重命名为 _Name.scss 并将其导入到我的主 SCSS 文件中。

---

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

/*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> 中调用 mix 帮助器方法来包含合并的结果：

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