我想在我的Rails 6应用程序中使用Bulma CSS框架，为此我遵循本教程，但在我的上下文中有一些差异:
-
我想使用bulma-rails宝石。
-
我不想使用webpack，因此我已经从我的应用程序中删除了webpacker，并做了相关的更改，使应用程序使用资源管道，这是Rails版本小于6的默认配置。
当我访问根页面在我的应用程序，我面临以下错误
Started GET "/" for 127.0.0.1 at 2021-08-03 20:24:35 +0530
Processing by WelcomeController#index as HTML
Rendering layout layouts/application.html.haml
Rendering welcome/index.html.haml within layouts/application
Rendered welcome/index.html.haml within layouts/application (Duration: 6.5ms | Allocations: 3376)
Rendered layout layouts/application.html.haml (Duration: 94.4ms | Allocations: 21476)
Completed 500 Internal Server Error in 108ms (ActiveRecord: 0.0ms | Allocations: 24374)
ActionView::Template::Error (Error: Undefined variable: "$white-bis".
on line 9:20 of app/assets/stylesheets/_layout.scss
>> background-color:$white-bis;
-------------------^
):
app/assets/stylesheets/_layout.scss:9
127.0.0.1 - - [03/Aug/2021:20:24:35 IST] "GET / HTTP/1.1" 500 123078
- -> /
如果我注释掉下面的部分
background-color:$white-bis;
来自app/assets/stylesheets/_layout.scss中定义的.header样式(如前面所示)，然后页面成功加载
但我想保留那种风格。谁能帮我找出问题并解决它?
在我的理解中以下导入在我的app/assets/stylesheets/main.scss(如下所示)
@import 'bulma';
应该导入文件app/assets/stylesheets/bulma。sass是bulma-railsgem版本0.9.1的一部分，我正在使用。如果这是正确的，那么该文件中已经有以下导入
@import "sass/utilities/_all"
和我看到的错误变量是在上述导入依次导入的一个文件中定义的。那么为什么会出现错误呢?
下面我分享我的代码
Gemfile
ruby '3.0.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.1', '>= 6.1.4'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 6.0'
gem 'bulma-rails', '~> 0.9.1'
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.7'
应用程序/资产/样式表/_layout.scss
body {
display:flex;
flex-direction:column;
justify-content:space-between;
height:100vh;
}
.header {
background-color:$white-bis;
padding:2rem 1.5rem;
}
.section {
display:flex;
flex:1 0 auto;
}
应用程序/资产/样式表/main.scss
@import 'font-awesome';
@import 'bulma';
@import '_layout';
应用程序/资产/样式表/application.css
/*
*
*= require main
*= require_self
*/
配置初始化/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
Rails.application.config.assets.precompile += %w( )
app/views/布局/application.html.haml
- app_name = 'MyApp'
!!!
%html<
%head<
%meta{ content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }
%meta{ name: "viewport", content: "width=device-width, initial-scale=1" }
%title= app_name
= csrf_meta_tags
= csp_meta_tag
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
%body<
%header.header<
.container<
%nav.level<
.level-left<
.level-item<
= app_name
.level-right<
%p.level-item<
%a.button<
%span.icon<
%i.fa.fa-github
%span GitHub
%p.level-item
= link_to("Manage Users", nil, :class => "button is-dark is-outlined")
%section.section<
.container<
= yield
%footer.footer
.container<
= "Copyright © 2021 #{app_name}. All rights reserved."
[1]: https://blackninjadojo.com/css/bulma/2019/02/27/how-to-create-a-layout-for-your-rails-application-using-bulma.html
[2]: https://github.com/joshuajansen/bulma-rails/blob/f731ffcf1b4c5b6691a819746469672a30839d72/app/assets/stylesheets/bulma.sass
最后我找到了一个解决方案来解决我在上面的帖子中分享的错误。在下面分享答案。
替换app/assets/config/manifest.js中的
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
//= link application.js
//= link application.css
解决方案引用
从https://github.com/rails/sprockets/issues/474找到上述解决方案。具体来说，参考链接中的以下注释有帮助
https://github.com/rails/sprockets/issues/474 issuecomment - 374958102
https://github.com/rails/sprockets/issues/474 issuecomment - 597563991
https://github.com/rails/sprockets/blob/master/UPGRADING.md#manifestjs(在https://github.com/rails/sprockets/issues/474#issuecomment-554535369中找到了对这个的参考)
谢谢。