我想在我的 Rails 6 应用程序中使用 Bulma CSS 框架，为此我正在关注本教程，但在我的上下文中存在一些差异：
我想使用bulma-rails gem。
我不想使用 webpack，因此我从我的应用程序中删除了 webpacker 并进行了相关更改，以便应用程序使用资产管道，这是低于 6 的 Rails 版本中的默认值。
这样，当我访问应用程序中的根页面时，我面临以下错误
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;
从（如前所示）.header中定义的样式，app/assets/stylesheets/_layout.scss然后页面加载成功
但我想保留这种风格。任何人都可以帮我找出问题并解决它吗？
据我了解，我的以下导入app/assets/stylesheets/main.scss（如前所示）
@import 'bulma';
应该导入文件app/assets/stylesheets/bulma.sass这是我正在使用的bulma-railsgem 版本的一部分。0.9.1如果这是正确的，那么该文件中已经有以下导入
@import "sass/utilities/_all"
并且我看到错误的变量是在上面显示的导入依次导入的文件之一中定义的。那为什么我会出错？
下面我分享我的代码
宝石文件
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( )
应用程序/视图/布局/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