Laravel Mix：将Sass编译为.css和.min.css

Question

我在这里碰了壁。

对于我的项目，我希望Laravel Mix / webpack将.scss文件编译成两个文件：一个常规的未压缩（展开或嵌套）.css文件和一个压缩后的.min.css文件，因此我实质上拥有两个文件。

我已经尝试过：

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

然而，这会导致错误，因为未编译.css文件。我知道当运行npm run production时，Laravel Mix会进行缩小，但我对两个文件感兴趣，而不仅仅是一个production编译的文件。有没有办法在不修改整个webpack配置的情况下实现这一点？

- moso

Answer 1

我通过尝试了几个方法找到了一个答案，并得出结论，我不会使用Laravel Mix的production脚本来完成这个任务。当运行npm run production时，我无法找到Laravel Mix不对常规CSS进行缩小的方法，但是minify()需要production才能工作，因为如果环境是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本质上只是一块我们骗过来让它“认为”的石头¹。

- moso

Answer 2

你能试试这个吗？

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

但是请快速检查文件中的bootstrap.scss名称。

- Rohit Jadhav

Answer 3

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

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

当你想要压缩 CSS 时，在控制台中运行 npm run production，否则运行npm run development。

编辑：如果你想同时处理 SCSS 和压缩，请分别进行处理：

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

- llobet

---

我非常清楚npm脚本的工作原理。因此，我认为您没有完全阅读我的问题。我想保留未经压缩的.css文件，并同时生成一个压缩后的.min.css文件。而不仅仅是当我运行npm run production时只生成一个压缩的文件。我已经编辑了这个问题，以使我的意图更加明确。对于造成的困惑，请谅解。 - moso

好的，我有点困惑。现在我的回答可能会有所帮助。 - llobet

没问题，谢谢。然而，即使我按照你的建议将两者分开，copy()仍会抛出一个错误，说文件或目录不存在。我甚至尝试了绝对路径，但是还是不行。所以我在GitHub上提出了一个问题。 - moso

好的，请原谅我。如果您删除了复制呢？这就是为什么我放置了两个混合操作的原因。 - llobet

然后Laravel Mix抱怨重复项 :) 相信我，运行两个mix.sass是我尝试的第一件事情，因为它是最简单的解决方案。 - moso

Answer 4

虽然这是一个老问题，但我认为这可能会有所帮助：

/**
 * Tested over Laravel Mix V6 
 */
//If your in development, normally you compile the original css. You can run (npx mix watch) command then start your edits
if(!mix.inProduction()) {
    mix.js( 'src/app.js', 'dist/' )
    .sass('src/output.scss', 'assets/css/output.css');
}

//Then this will run only on production, which will minify the output
if(mix.inProduction()) {
    mix.js( 'src/app.js', 'dist/' )
    .sass('src/output.scss', 'assets/css/output.min.css');
}

- Makiomar

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community