импортированные CSS-файлы не компилируются в файл application.css - PullRequest
Новая
       38

импортированные CSS-файлы не компилируются в файл application.css

0 голосов
/ 16 октября 2018

У меня есть файл style.scss, в который я импортировал кучу других файлов, таких как 

@import url(asset-path('bootstrap/css/bootstrap.min.scss'));
@import url(asset-path('ionicons/css/ionicons.min.scss'));
@import url(asset-path('slick-carousel/slick/slick.scss'));
@import url(asset-path('slick-carousel/slick/slick-theme.scss'));
@import url(asset-path('owl-carousel/assets/owl.carousel.min.scss'));
@import url(asset-path('owl-carousel/assets/owl.theme.default.scss'));
@import url(asset-path('owl-carousel/assets/carousel.min.scss'));
@import url(asset-path('bxslider/jquery.bxslider.min.scss'));
@import url(asset-path('magicsuggest/magicsuggest-min.scss'));

, эти файлы находятся в каталоге vendor /.

Просмотр производственной вкладки сетиВ этом режиме сервер отправляет запрос каждому из импортированных файлов из файлов scss, а не компилирует их в файл.

Я также использую самоцвет sass rails.Есть что-то, чего я не понимаю в конвейере активов рельсов?

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Ваш мастер-файл CSS выполняется через файл app/assets/stylesheets/application.css.

Например: 

*= require navbars.css.scss
*= require footer.css.scss
*= require cookiewarning.css.scss
*= require_self

Приведенный выше код будет включать в мастер-файл application.css все упомянутые CSS-файлы, независимо от того, находятся они в app/assets app/lib или app\vendor.

Ваш мастер-файл вызывается в views/layouts/application.html.erb

<%= stylesheet_link_tag 'application', media: 'all' %>  
<%= yield(:headcss) %>
<%= stylesheet_link_tag params[:controller], media: 'all' %>

Как видите, у меня есть отдельный файл для текущего контроллера.А также тег yield для дополнительного CSS, который я хотел бы добавить при необходимости.

Также одно замечание о ваших файлах: SASS - это препроцессор CSS.Лучше назвать ваши файлы whatever.css.scss, чем whatever.scss.У меня возникли некоторые проблемы с правильной работой помощников SASS из-за этого: Sass rails, похоже, генерирует другой логический путь, чем в манифесте

0 голосов
/ 16 октября 2018

Путаница возникает из-за того, что SASS каким-то образом переопределяет директиву @import.

В вашем случае используется чистая директива CSS '@import , поскольку вы передаете url(.., который, как вы заметили, делает HTTP-запрос для каждого файла.

Чтобы использовать версию @import для SASS (которая будет импортировать и объединять содержимое), вам нужно передать файлы в кавычках: 

...  
@import 'slick-carousel/slick/slick.scss';
...

Вот подробное объяснение о SASS '@ import

...