Можно ли изменить application.css на application.css.sass?

#heroku #ruby-on-rails-3.1 #sass #asset-pipeline #environments

#heroku #ruby-on-rails-3.1 #sass #ресурс-конвейер #среды

Вопрос:

Я хотел бы изменить свой файл application.css на файл sass и использовать @import для извлечения всех необходимых файлов. Затем я хочу @импортировать application.css.sass в файлы sass для конкретной страницы. Все это прекрасно работает в разработке, но когда я нажимаю его в рабочую среду на heroku, я получаю эту ошибку:

 Error compiling CSS asset
Sass::SyntaxError:  File to import not found or unreadable: application

application.css.sass:

 @import "reset"
@import "typography"
@import "buttons"
@import "junk"

$yellow: #f0f090
$orange: #f89818
$blue1: #184898
$blue2: #4888c8

body
 background: ...
 ...
 /* all the rest of the app-wide styling */

Уникальная страница.css.sass:

 @import "application"
/*page specific styling*/

Затем на страницах, которым нужны материалы, отличные от application.css, я вызываю

 !!! 5
%html
  %header       
    = stylesheet_link_tag "uniquePage"

Ответ №1:

В Rails 3.1 application.css предназначен для использования в качестве файла манифеста. Вы не должны переименовывать его и не должны размещать в нем содержимое, за исключением директив require или include.

Используйте другое имя файла для вашей цели.

Также обратите внимание, что синтаксис SCSS @import похож на использование partial. Если вы хотите, чтобы @import application импортируемый файл должен быть вызван _application , а не application .

Ответ №2:

вы должны изменить его на application.scss 🙂

пожалуйста, проверьте эти два RailsCasts:

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

http://railscasts.com/episodes/282-upgrading-to-rails-3-1

1 к предложениям Симоны

Ответ №3:

Тогда, я думаю, возникает вопрос, как мне создать разные файлы манифеста для разных наборов css?

Есть несколько способов сделать это:

1. На листы страницы

Это то, что вы делаете сейчас, но я бы организовал листы немного по-другому, используя @imports как в приложении, так и на уникальной странице. (Вместо того, чтобы импортировать приложение на уникальную страницу).

2. Используйте второй лист только для этих страниц

У вас может быть второй лист только с изменениями для этой страницы. Все страницы имеют лист приложения, и на уникальной странице добавляется второй тег только с необходимыми изменениями. Это будет стоить вам дополнительного http-запроса.

3. Реорганизуйте свой CSS

Если дополнительный CSS не является существенным, возможно, вам лучше провести рефакторинг, чтобы включить код в ваш основной файл. Легко добавить дополнительный класс к тегу body уникальной страницы и настроить любой CSS, чтобы страница могла его использовать.

Вы все еще можете поместить этот CSS в файл для уникальной страницы (чтобы помочь с обслуживанием) и @импортировать его в свой основной файл.

Как правило, если изменения CSS не являются существенными, я бы попытался объединить их с основным CSS, в противном случае выберите вариант 1.