Должен ли я использовать @import или файлы манифеста? - PullRequest
Новая
       19

Должен ли я использовать @import или файлы манифеста?

37 голосов
/ 20 мая 2011

В Rails 3.1 представлен новый способ организации JS и CSS с введением файлов манифеста. Например, application.js может выглядеть так: 

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

Это соберет различные фрагменты Jquery, все ваши собственные JS, объединят их вместе и предоставят клиентам один файл. Достаточно просто.

К сожалению, картина с SASS мне не так понятна. SASS уже имеет встроенную конкатенацию с использованием @import.

Должен ли я преобразовать все свои частичные файлы в полные файлы SASS, а затем объединить их с помощью файла манифеста или продолжить использовать @import? Почему?

Ответы [ 3 ]

30 голосов
/ 09 июня 2011

Sprockets преобразует весь импорт в CSS перед объединением, поэтому его нельзя использовать для обмена миксинами и переменными между файлами. Я предполагаю, что так будет и дальше, потому что вы можете импортировать файлы SASS, LESS и CSS с помощью этого метода.

Вот как я это делаю:

  • Если у меня есть ERB для включения (в основном для asset_path() вызовов), я помещаю их в свой основной файл application.css.scss.erb
  • Если у меня есть вендор CSS, который я хочу включить, я запрашиваю его через Sprockets, например, //=require jquerymobile
  • В этом же файле я использую команду SASS @import для явной загрузки всех файлов. Однако ни один из файлов @ import не может быть .erb.
    1. загрузить базовые данные (например, сброс) и импортировать их с помощью миксинов
    2. объявить переменные
    3. импорт определенных стилей

Вот как выглядит мой app.css на данный момент. Не забывайте ";" и цитаты: 

// Using SASS import is required for variables and mixins to carry over between files.
@import "reset.css.scss";
@import "mixins.css.scss";

$color_base: #9b2d31;
$color_background: #c64e21;

// Using asset_path is important for browsers to use versioned url for the asset.
// This lets us do aggressive caching.
$logo-url: url(<%= asset_path("logo.png") %>);

@import "application/layout.css.scss";
@import "application/sidebar.css.scss";
@import "application/videos.css.scss";
@import "application/pages.css.scss";
...

Обратите внимание, что я все еще изучаю конвейер ресурсов Rails 3.1, поэтому ваш пробег может отличаться Я постараюсь вернуться и обновить, если найду что-нибудь еще интересное.

2 голосов
/ 30 мая 2014

Лучший способ решить эту проблему - использовать встроенную директиву @import, как описано здесь: https://github.com/rails/sass-rails#important-note

На этот вопрос уже был дан ответ: как использовать импорт звездочек с sass

Надеюсь, это поможет! :)

1 голос
/ 23 ноября 2014

sass-rails gem явно заявляет не использовать синтаксис require с файлами SASS - вместо этого используйте операторы SASS @import.

...