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

我已经在这里将我的头靠在了墙上。Laravel Mix：将Sass编译成.css和min.css

我的项目，我想Laravel混合/的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配置？

来源

2017-06-01 moso

Laravel Mix/Webpack在package.json文件中有一些预生成脚本。保持它想：

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

，当你想压缩CSS做控制台npm run production，否则npm run development。

编辑：如果你想要做的两个流sassed和缩小的单独做到这一点：

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

来源

2017-06-01 11:50:11 llobet

我很清楚'npm'脚本是如何工作的。所以我认为你完全没有读过我的问题。我想保留未缩小的'.css'文件并生成一个缩小的'.min.css'文件。当我运行'npm run production'时不仅仅是一个缩小的文件。我编辑了这个问题，使它更清楚我想做什么。对困惑感到抱歉。 – moso

好吧，我感到困惑。现在我的回答可能会有帮助 – llobet

没问题，谢谢。然而，'copy（）'会抛出一个错误，指出文件或目录不存在，即使我按照您的建议分离了这两个文件或目录。我甚至尝试过绝对路径，但唉。所以我做了一个关于GitHub的问题（https://github.com/JeffreyWay/laravel-mix/issues/852）。 – moso

我找到了答案与一些事情搞乱了，来到我不是结论我们将使用Laravel Mix的production-script。我无法找到Laravel Mix在运行npm run production时不会缩小常规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是字面上的一个摇滚，我们想到¹。

来源

2017-06-06 07:18:37 moso

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

回答

相关问题