【发布时间】：2021-10-08 19:39:47
【问题描述】：
我想在我的 Rails 6 应用程序中使用 Bulma CSS 框架，为此我正在关注tutorial，但我的上下文有一些不同：
-
我想使用 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;
从app/assets/stylesheets/_layout.scss 中定义的.header 样式（如前所示）然后页面加载成功
但我想保留这种风格。谁能帮我找出问题并解决它？
据我了解，app/assets/stylesheets/main.scss 中的以下导入（如前所示）
@import 'bulma';
应该导入文件app/assets/stylesheets/bulma.sass，它是我正在使用的bulma-rails gem 版本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'
app/assets/stylesheets/_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;
}
app/assets/stylesheets/main.scss
@import 'font-awesome';
@import 'bulma';
@import '_layout';
app/assets/stylesheets/application.css
/*
*
*= require main
*= require_self
*/
config/initializers/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/layouts/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
【问题讨论】：
标签： ruby-on-rails asset-pipeline bulma ruby-on-rails-6.1