Webpack Laravel Mix：将Sass编译成.css和min.css

我的头撞到这里的墙了

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

编译到的文件

---

在不修改整个网页包配置的情况下，有没有办法做到这一点？

Laravel Mix/webpack在package.json文件中有一些预构建脚本。 保持这样：

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

当您想要缩小css时，请在控制台中执行

npm运行production

，否则

npm运行development

编辑：如果要同时执行sassed和minified流，请分别执行：

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

---

我通过搞乱一些事情找到了答案，并得出结论，我不会使用Laravel Mix的

制作

-脚本来实现这一点。在运行

npm-run-production

时，我找不到一种让Laravel-Mix不缩小常规CSS的方法，但是，

production

需要

production

才能使

minify（）

起作用，因为如果环境是

开发

，它就不会缩小

因此，我拉了一个包，缩小命令。这就是

minifier（）

拯救的地方

npm安装--保存开发人员缩微器

然后我的

webpack.mix.js

如下所示：

let mix=require（'laravel-mix'）；
设minifier=require（'minifier'）；
mix.sass（'src/sass/app.scss'，'public/css/'{
outputStyle:“嵌套”
});
然后（（）=>{
minifier.minify（'public/css/app.css'）
});

当网页包完成构建时，

mix.then（）

将被触发，

.minify（）

将自动创建一个名为

app.min.css

的新文件

然后，当我运行

npm run dev

时，我的sas将以嵌套格式编译，并且它也将被缩小。这不是最优雅的解决方案，但这是我能想到的最好的解决方案

嘿，如果这很愚蠢但有效，那就不愚蠢了。我的意思是，CPU实际上是一块石头，我们被欺骗去思考。

你能试试这个吗-

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

---

但请稍后检查文件中的名称bootstrap.scss。

我非常了解

npm

脚本的工作原理。所以我认为你没有充分阅读我的问题。我想保留未缩小的

.css

-文件，并生成一个缩小的

.min.css

-文件。不仅仅是我运行

npm运行production

时缩小的文件。我对问题进行了编辑，以便更清楚地说明我想做什么。抱歉搞混了，好吧，我搞混了。现在我的回答可能会有帮助。没问题，谢谢。但是，

copy（）

会抛出一个错误，指出文件或目录不存在，即使我按照您的建议将它们分开。我甚至尝试过绝对路径，但唉。所以我做了一个决定。好吧，原谅我。如果你删除副本呢？这就是为什么我设置了两个混合操作。然后Laravel mix抱怨重复操作：）相信我，运行两个

mix。sass

是我尝试的第一件事，因为这是最简单的解决方案。