使用gruntjs將css和sass文件編譯爲單個css文件

我有一個bootstrap.css文件，我想用style.sass中的自定義樣式編譯爲單個輸出文件，例如style.css。對於sass編譯，我使用gruntjs和grunt-contrib-sass擴展。我社科院Gruntfile.js配置是這樣的：使用gruntjs將css和sass文件編譯爲單個css文件

sass: { 
    dist: { 
     options: { 
      //style: 'compressed', 
      style: 'expanded', 
      lineNumbers: true 
     }, 
     files: { 
      'build/styles/style.css': 'src/styles/style.sass' 
     } 
    } 
}

我試圖導入bootstrap.css到SASS文件，而是隻產生在輸出CSS下一個代碼（這是正確的行爲http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import）：

@import url(bootstrap.css); 

..... 
/*my style.sass rules*/

我甚至試着列出多個文件concatination和處理的順序，就像在uglifier設置：

files: { 
    'build/styles/style.css': ['src/styles/bootstrap.css', 'src/styles/style.sass'] 
}

但這隻會增加bootstrap.css到f中inal style.css文件忽略style.sass的存在。

由於我是gruntjs的新手，我無法弄清楚這應該如何正確完成。

來源

2014-10-30 Kamilius

你有沒有嘗試刪除URL（），讓你得到'@import 「bootstrap.css;」'？我只進口「.scss」像這樣-files：'@import 「引導」;' – KnutSv 2014-10-30 13:38:26

@import URL（...）;是輸出文件的CSS。問題是，SASS通過規則擴展了css默認導入功能，您可以在上面的參考資料中找到它們。 – Kamilius 2014-10-30 13:49:08

我看，如果你已經使用了'scss'格式化你可能只是改變了自舉的格式'bootstrap.scss'與'@import進口的「引導」;'因爲香草CSS是有效SCSS。基本上你有三個選擇; 1.重寫引導與SASS語法，2.變化SASS文件到SCSS語法或3單獨地呈現SASS和經由另一咕嚕分機與引導合併。 – KnutSv 2014-10-30 21:34:05

Grunt配置是正確的。你的文件沒有被導入的原因是因爲SASS設計的工作方式。

的SASS documentation狀態：

默認情況下，它會尋找薩斯文件直接導入，但也有少數情況下才會編譯成CSS @import規則：

如果該文件的擴展名是.css。

如果文件名以http：//開頭。

如果文件名是一個url（）。

如果@import有任何媒體查詢。

既然要導入的文件有一個.css分機上，因此將不會直接進口，但仍然是一個標準的CSS @import。

你有三種選擇來解決此問題：

包含的文件重命名爲_bootstrap.scss。（如果不添加下劃線，將會創建一個bootstrap.css以及不需要的主輸出文件。）
包括Bootstrap SCSS source作爲項目的依賴項，並針對該項目進行構建。在您的項目根文件夾中輸入$ bower install bootstrap-sass-official以安裝Bootstrap source using Bower。（有關設置Bower的說明，請參閱Bower website。）然後，您可以用@import 'bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';替換上面的導入。
使用連接庫（如grunt-contrib-concat）在構建過程中將Bootstrap.css與主樣式表組合在一起。

這第一個選擇是好的，如果你手動下載引導CSS文件到你的項目，但是，如果要包括它與NPM /亭子是不理想的依賴。

我會推薦第二個選項，因爲從源代碼構建Bootstrap不僅可以解決您的問題，還可以自定義Bootstrap變量以適應您的主題，而不會隨後使用樣式規則覆蓋它們。唯一的缺點是你的構建過程可能會稍微長一點，因爲Bootstrap源碼的SASS構建比較大。

來源

2015-01-16 15:12:10 marnusw

使用gruntjs將css和sass文件編譯爲單個css文件

回答

相關問題