鮑爾和Sass在類似Rails的文件夾結構中

所以我正在處理這個項目，雖然它由Node.js工具（Grunt作爲任務運行器）處理，但它具有類似於Rails的文件夾結構。我正在使用Bower來管理我的供應商資產。鮑爾和Sass在類似Rails的文件夾結構中

我的文件夾結構如下所示：

. 
    └── src 
     ├── app 
     │   └── assets 
     │    ├── javascripts 
     │    └── stylesheets 
     │     └── application.scss 
     ├── public 
     └── vendor 
      └── bower

基本上所有的開發源代碼住在app/assets文件夾，public是哪裏生產的文件去vendor就是第三方的東西去。

所以，你可以看到，我有這個application.scss文件。這是我正在使用的樣式表清單。它負責導入所有應該編譯到我最終樣式表文件的模塊。

問題是我沒有看到一個理智的方式來引用從我的清單文件中通過Bower安裝的庫。

隨着Rails資產管道/鏈輪我會做//= require_tree vendor/bower，這將工作，但我不知道這個項目的背景下做什麼等效。

你們有什麼建議我可以做什麼？

Ps .:使用Grunt任務來「處理」這是沒有問題的。

來源

2014-02-12 Rafael Rinaldi

只需通過創建vendor/assets/components配置鮑爾安裝軟件包根目錄中有一個名爲.bowerrc的文件。

{"directory": "vendor/assets/components"}

裏面的一切vendor/assets和app/assets加到負載路徑，所以你可以參考這些文件。

您可能需要放入您想要加載的實際文件。假設您安裝了normalize-scss包。你可能不得不添加到您的application.scss文件：

@import "normalize-scss/normalize";

這只是一個猜測，但我對賭。

編輯：這將工作在Rails應用程序，這顯然不是你的情況。因此，如果您使用Grunt編譯SCSS，則可以使用loadPath選項將Bower目錄添加到加載路徑。

的Gruntfile的薩斯任務可能看起來像這樣的東西：

{ 
    sass: { 
    dist: { 
     files: {"src/assets/stylesheets/application.scss": "public/application.css"}, 
     options: { 
     loadPath: ["vendor/bower"] 
     } 
    } 
    } 
}

要導入的文件，你會做這樣的事情我上面所說的（引用整個文件）。沒有測試Grunt配置，但它可能會工作。

來源

2014-02-12 13:44:27

Bower下載整個git存儲庫。

例子：

bower install jquery

這將創建下列結構

tree vendor/bower 
bower 
└── jquery 
    ├── bower.json 
    ├── component.json 
    ├── composer.json 
    ├── jquery.js 
    ├── jquery-migrate.js 
    ├── jquery-migrate.min.js 
    ├── jquery.min.js 
    ├── jquery.min.map 
    ├── package.json 
    └── README.md 

1 directory, 10 files

它沒有多大意義，加載在我看來，所有這些文件。

你可以做的是：

符號鏈接所有必需的文件到這個目錄：

cd vendor/require; ln -s ../bower/jquery/jquery.min.js

則需要與紅寶石的幫助或手動

所有文件

Dir['path/to/vendor/require/*.js'].each do |file_name| 
    puts "<script type="text/javascript" src="#{file_name}"></script>" 
end

你也可以使用步兵和它的concat任務：

grunt.initConfig({ 
    concat: { 
    options: { 
     separator: ';', 
    }, 
    dist: { 
     src: ['path/to/vendor/bower/jquery/jquery.min.js', 'path/to/vendor/bower/other-package/init.min.js'], 
     // or if You decide to create those symlinks 
     // src: ['path/to/vendor/require/*'], 
     dest: 'path/to/public/js/built.js', 
    }, 
    }, 
});

對於compass上sass你可以使用：

@import 'path/to/directory/*';

來源

2014-02-12 01:12:36 czerasz

鮑爾和Sass在類似Rails的文件夾結構中

回答

相關問題