问题描述
我正在尝试向现有的 Rails 6 应用程序添加自定义 CSS 文件。
该应用已安装（除其他外）这些 gems (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
如果我简单地从 custom.scss 复制 CSS 数据并将其粘贴到 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 样式？我找不到合适的设置。
提前致谢。