Question

我把头靠在墙上。

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

Answer 1

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');

Answer 2

你可以尝试一下 -

SUM(H) / SUM(AB) AS 'BA'

但很快就检查文件中的名称bootstrap.scss。

Answer 3

我通过搞乱一些事情找到答案，并得出结论我不打算使用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实际上是一块摇滚，我们在思考¹。

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

3 个答案: