Laravel Mix:将Sass编译成.css和min.css

问题描述 投票:1回答:3

我把头靠在墙上。

对于我的项目,我希望Laravel Mix / webpack将.scss文件编译成两个文件,一个常规的,未缩小的(扩展的或嵌套的).css文件,以及一个缩小(压缩)的.min.css文件,所以我基本上有两个文件。

我尝试过:

mix.sass('src', 'output')
   .copy('output.css', 'output.min.css')
   .minify('output.min.css');

但是,这会导致错误,因为未编译.css文件。

我知道Laravel Mix在运行npm run production时会缩小,但我对两个文件感兴趣,而不仅仅是production编译的那个。

有没有办法做到这一点,而无需修改整个webpack配置?

webpack sass laravel-mix
3个回答
0
投票

Laravel Mix / Webpack在package.json文件中有一些预构建脚本。保持像:

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

当你想缩小css时,在控制台中执行npm run production,否则npm run development

编辑:如果你想做两个流sassed和minified做分开:

mix.sass('src', 'output');
mix
.sass('src', 'output')
.minify('output.min.css');

0
投票

你能试试这个 -

mix.js('resources/assets/js/bootstrap.js', 'public/js')
    .sass('resources/assets/sass/bootstrap.scss', 'public/css');

但是很快就会在文件中检查名称bootstrap.scss。


-1
投票

我通过弄乱一些东西找到答案,并得出结论我不打算使用Laravel Mix的production脚本。我无法找到Laravel Mix在运行npm run production时不缩小常规CSS的方法,但production需要minify()才能工作,因为如果环境是development它不会缩小。

所以我拉了一个缩小命令的包。这就是minifier()拯救的地方。

npm install --save-dev minifier

然后我的webpack.mix.js看起来像这样:

let mix = require('laravel-mix');
let minifier = require('minifier');

mix.sass('src/sass/app.scss', 'public/css/', {
    outputStyle: 'nested'
});

mix.then(() => {
    minifier.minify('public/css/app.css')
});

当webpack完成构建时会触发mix.then().minify()将自动创建一个名为app.min.css的新文件。

然后,当我运行npm run dev时,我的Sass将以嵌套格式编译,并且它也将被缩小。不是最优雅的解决方案,但这是我能想到的最好的解决方案。

嘿,如果它是愚蠢但它有效,它并不愚蠢。我的意思是,CPU实际上是一块岩石,我们欺骗了思考¹

© www.soinside.com 2019 - 2024. All rights reserved.