使用Grunt時無法在Bower組件中找到CSS文件

我試圖將CSS樣式表導入組件的.sass文件。在這個例子中，該組件是自舉選和進口看起來像這樣：使用Grunt時無法在Bower組件中找到CSS文件

@import 'bootstrap-select/bootstrap-select.css'

這成功地建立，但瀏覽器無法找到該文件，我收到以下錯誤在瀏覽器中：

GET http://localhost:9000/styles/bootstrap-select/bootstrap-select.css 404 (Not Found)

有沒有什麼特別的東西需要設置才能在build中包含.css文件？

來源

2013-10-15 Dallas Clark

爲了將文件的代碼導入到Sass文件中，導入的文件需要有一個.sass或.scss的結尾。如果文件以.css結尾，則代碼不會被吸入，而只是創建HTTP請求的正常CSS語句@import。

只需複製要導入的css文件，將文件結尾更改爲.scss和@import該文件。然後，Sass會吸收代碼，並在您的CSS文件中將它替換爲@import語句。

來源

2013-10-15 09:56:57

感謝您的建議，我已經將此作爲臨時解決方法執行，但它違背了使用bower組件的目的。理想情況下，您希望在不進行任何手動處理的情況下安裝或更新一個bower組件。 –

的確如此，但您無法通過@import將CSS代碼導入Sass只是意味着您需要通過Bower提供的Bootstrap-select的Sass版本。如果沒有可用的Sass版本，則無法通過Bower管理該庫。 –

Kahlil說了什麼;但我會建議使用bootstrap-sass，因爲它提供了更多的靈活性，當涉及到您可以/不能包含的內容時。我在生產中使用它，它非常好。你可以完全定製你的構建，包括變量，以便你可以調整按鈕的顏色，間距等。例如：

/* 
|--------------------------------------------------------------------- 
| Only include the parts of Bootstrap that we are actually using. 
|--------------------------------------------------------------------- 
*/ 

$navbar-margin-bottom: 0; 

@import "../vendor/bootstrap-sass/lib/variables"; 
@import "../vendor/bootstrap-sass/lib/mixins"; 
@import "../vendor/bootstrap-sass/lib/normalize"; 
@import "../vendor/bootstrap-sass/lib/print"; 
@import "../vendor/bootstrap-sass/lib/scaffolding"; 
@import "../vendor/bootstrap-sass/lib/type"; 

// etc

將它添加到您的bower.json（bootstrap-sass）並使用它。

來源

2013-10-15 20:07:28 Ben

感謝Ben的建議，我已經在使用sass-bootstrap，但對於其他未準備就緒（即bootstrap-select）的bower組件，解決方案似乎是手動調整。 –

對不起，我以爲select是twbs的一部分，我的不好。 RE：手動調整;看起來像，是的。如果您對源代碼進行了調整，您認爲這會對其他人有益，那麼請向原始存儲庫提交拉取請求。那麼，那些正在尋找組件的SASS版本的人將受益，並且如果它將被更新，則所有未來版本都將在Bower包內被SASS準備好。另一種方法是使用類似'grunt-contrib-copy'的東西，並將擴展名重命名爲CSS，將文件放在不同的目錄中。 :) – Ben

還有的使用紅寶石的寶石，它允許所描述稱爲sass-css-importer的功能，它允許以下語法從內部.scss文件包括與.css結尾的文件：

@import "CSS:../../bower_components/alertify/themes/alertify.core"; 
@import "CSS:../../bower_components/alertify/themes/alertify.default"; 
@import "CSS:../../bower_components/normalize-css/normalize"; 
@import "../../../bower_components/bourbon/app/assets/stylesheets/_bourbon"; 
@import "../../../bower_components/neat/app/assets/stylesheets/_neat";

它可以被添加到Gemfile像這樣：

source "http://rubygems.org" 
gem "sass-css-importer"

而在Gruntfile要求：

sass: 
    options: 
    quiet: true 
    require: 'sass-css-importer' 
    static: 
    files: [ 
     expand: true 
     cwd: 'source/styles' 
     src: ['*.scss'] 
     dest: 'build/styles' 
     ext:

YMMV。祝你好運！

來源

2013-11-12 20:41:23

使用Grunt時無法在Bower組件中找到CSS文件

回答

相關問題