Блог

Я пытаюсь добавить пользовательский файл CSS в существующее приложение Rails 6.

Приложение установило (среди прочего) эти драгоценные камни ( Gemfile ):

 gem 'webpacker'
gem 'jquery-rails'
gem 'jquery-turbolinks'
gem 'jquery-ui-rails'
gem 'sassc-rails'
...
 

В Gemfile.lock , я вижу там также драгоценные камни, связанные со звездочками, такие как:

   sprockets-rails (>= 2.0.0)
 

и так далее.

Я попытался добавить свой собственный файл JS app/assets/stylesheets/custom.scss и определил в этом файле свой собственный CSS. В этом каталоге уже application.scss была страница с таким содержимым:

  /*
 * require jquery-ui
 * require_tree .
 * require_self
 */
 @import 'custom'; // I added this line to reflect the new file
 

Если я просто скопирую данные CSS custom.scss и вставлю их application.scss , это тоже не сработает — похоже, что даже application.scss как-то не активировано.

Затем, внутри app/assets/config/manifest.js , есть этот контент:

 //= link_tree ../images
//= link_directory ../javascripts .js
//= link application.scss
//= link vendor/slick.min.js
 

Здесь я попытался добавить //= link custom.scss , но это не помогло.

И это то, что package.json :

 {
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@hotwired/turbo-rails": "^7.0.0-beta.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.2.1",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "autoprefixer": "^9",
    "el-transition": "^0.0.7",
    "google-maps": "^4.3.3",
    "jquery": "^3.6.0",
    "jquery-ui": "^1.12.1",
    "postcss": "^7",
    "stimulus": "^2.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}
 

В application.html.haml , вот как загружается основной CSS:

 = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
 

Если я попытаюсь добавить

 = stylesheet_link_tag 'custom'
 

Я получаю эту ошибку:

 Sprockets::Rails::Helper::AssetNotPrecompiled in Site#home
custom.css
 

Как правильно определить и загрузить пользовательские стили CSS? Я не могу найти подходящую настройку.

Заранее спасибо.

Я использовал это руководство для добавления начальной загрузки, а также пользовательского стиля https://dev.to/shahershamroukh/add-bootstrap-and-fontawesome-to-your-ruby-on-rails-6-application-3fm7