Когда использовать stylesheet_pack_tag вместо stylesheet_link_tag с Rails 6

При создании нового проекта rails с помощью 9X_rails Rails 6 он создает application.html.erb 9X_ror с stylesheet_link_tag для загрузки CSS и 9X_ruby-on-rails-6 javascript_pack_tag для файлов javascript.

Теперь 9X_rails6 rails 6 также предоставляют stylesheet_pack_tag, поэтому 9X_rails мой вопрос: когда его использовать? И если 9X_ruby-on-rails-6 мы его используем, нужно ли нам добавлять 9X_rails6 все файлы CSS в папку app / javascript?

Как 9X_rails6 лучше всего загружать css, изображения с 9X_rails6 помощью rails 6 и webpacker?

18
0

ruby-on-rails

ruby-on-rails-6

webpacker
2
Общее количество ответов: 2

Ответ #1

Ответ на вопрос: Когда использовать stylesheet_pack_tag вместо stylesheet_link_tag с Rails 6

Вы должны использовать stylesheet_pack_tag, если вы импортируете 9X_rails6 какой-либо CSS в Webpack И если вы включили 9X_ror extract_css: true для любой среды в config/webpacker.yml.

Учитывая следующую структуру 9X_webpacker каталогов:

app/
  javascript/
    packs/
      application.js
    styles/
      site.css

И следующий код в application.js:

import '../styles/site.css'

Вы должны использовать 9X_rails6 <%= stylesheet_pack_tag 'application' %> в своем представлении, т.е. имя таблицы 9X_rails стилей совпадает с именем «пакета».

На этом 9X_ror этапе я также рекомендую переименовать app/javascript во 9X_rails6 что-то вроде app/frontend. Итак, ключевые изменения 9X_ror в config/webpacker.yml:

source_path: app/frontend
extract_css: true

app/
  frontend/
    packs/
      application.js
    styles/
      site.css

30
3
  • Я не знал, что нужно было включить `extract_css` ... средство изменения правил игры @rossta: praying_hands:< ...

Ответ #2

Ответ на вопрос: Когда использовать stylesheet_pack_tag вместо stylesheet_link_tag с Rails 6

Просто чтобы немного прояснить это. Это 9X_ruby-on-rails-6 основано на моем нынешнем понимании, которое, кажется, работает 9X_rails достаточно хорошо, но все же может быть 9X_ruby-on-rails не совсем точным.

CSS, обработанный конвейером 9X_ror ресурсов, получает css_link_tag, а CSS, импортированный 9X_ruby-on-rails-6 через пакет javascript Webpacker, упоминается 9X_rails с помощью css_pack_tag.

CSS конвейера активов находится 9X_ruby-on-rails-6 в app/assets/stylesheets. Webpack css находится в app/javascripts/wherever_you_want.

Таким образом, в 9X_webpacker webpack весь css, импортированный в пакет 9X_rails javascript, в конечном итоге извлекается 9X_rails6 в обслуживаемый файл, на который можно ссылаться 9X_ruby-on-rails-6 через то же имя, что и пакет js.

Итак, если 9X_ruby-on-rails в app/javascripts/application.js у вас есть:

import 'app/javascripts/css/one.css'
import 'app/javascripts/css/two.css'
import 'app/javascripts/css/three.css'

На них будет ссылаться

css_pack_tag 'application'

Это 9X_ror выглядит так в моих журналах развертывания

Entrypoints:
  application (430 KiB)
      css/application-9d82d487.css
      js/application-9f45d7ff735a7a203f28.js

Следует 9X_rails6 также отметить, что, как упоминалось выше, на 9X_ruby-on-rails это поведение влияет параметр extract_css.

Предположительно 9X_rails6 по умолчанию это ложь в development, а в production - истина. Один 9X_rails большой GOTCHA с этим состоит в том, что, по 9X_rails крайней мере, в моем случае, css_pack_tag на самом деле 9X_ruby-on-rails-6 не «требовался» при разработке в том смысле, что 9X_rails6 его удаление не имело никакого эффекта, потому 9X_rails что он не был извлечен локально. Он все 9X_webpacker еще «работал», потому что CSS был загружен 9X_webpacker в javascript и, похоже, каким-то образом 9X_webpacker применялся. Поэтому я удалил эти теги, думая, что 9X_rails они не нужны, прежде чем мое понимание улучшилось. К 9X_ruby-on-rails-6 сожалению, когда я через некоторое время 9X_ror развернул производство на heroku, ни один 9X_webpacker из моих css не работал, и мне потребовалось 9X_webpacker время, чтобы понять, почему, и вспомнить, что 9X_rails6 я удалил эти строки css_pack_tag.

2
0