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

Question

我在这里撞墙了。

对于我的项目，我希望 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 配置？

Answer 1

我通过弄乱一些东西找到了答案，并得出结论，我不会为此使用 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 就是一块石头，我们把它骗到了 ¹ 。