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

回答

相關問題