gpt4 book ai didi

webpack - Laravel 混合 : compile Sass into . css 和 min.css

转载 作者:行者123 更新时间:2023-12-04 16:09:55 24 4
gpt4 key购买 nike

我在这里撞墙了。

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

我试过:

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

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

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

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

最佳答案

我通过弄乱一些东西找到了答案,并得出结论,我不会为此使用 Laravel Mix 的 production -script。我找不到让 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')
});
mix.then() 在 webpack 构建完成时触发, .minify() 会自动创建一个名为 app.min.css 的新文件。

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

嘿,如果它很愚蠢但有效,那就不是愚蠢。我的意思是,CPU 就是一块石头,我们把它骗到了 ¹

关于webpack - Laravel 混合 : compile Sass into . css 和 min.css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44304620/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com