Laravel 5.4 Webpack Mix - 合并SCSS和CSS

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Laravel 5.4 Webpack Mix - 合并SCSS和CSS相关的知识,希望对你有一定的参考价值。

有没有办法合并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文件合并。

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

答案

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

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

另一答案

我这样做是将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>中调用mix helper方法来包含合并的结果:

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

以上是关于Laravel 5.4 Webpack Mix - 合并SCSS和CSS的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 5.4 - Mix - 如何运行浏览器实时重新加载

Laravel-mix Webpack 公共路径

如何在 Laravel 7 中使用 Webpack.mix.js 使用多个 js?

使用 Laravel Mix 时如何包含 webpack 插件?

使用 Laravel Mix 的 Webpack 块名称

Vue - 由于 webpack 版本(vue-cli-service、laravel-mix、webpack)导致 npm run serve 命令崩溃