Rails项目中Bulma样式未正常显示，请求技术支持

问题根源 #

你创建的是采用Webpack作为JavaScript打包工具的Rails项目，但在application.css（属于Sprockets资产管道）中使用SCSS的@import语法导入Bulma样式。由于.css文件不会被SCSS预处理器解析，导致Bulma的样式规则没有被正确加载，最终导航栏显示不符合预期。

解决步骤 #

1. 修改样式文件扩展名 #

将app/assets/stylesheets/application.css重命名为app/assets/stylesheets/application.scss，这样Rails会自动启用SCSS预处理器来解析文件中的导入指令。

2. 调整样式导入代码 #

在重命名后的application.scss中，保留以下导入语句（可移除原文件中的默认注释）：

@import 'bulma';
@import 'bulma-extensions';

3. 确认布局文件的样式引入 #

打开app/views/layouts/application.html.erb，确保存在以下样式引入标签（Rails项目默认已生成）：

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

4. 重启开发服务器 #

修改文件和配置后，必须重启Rails开发服务器，确保新的样式配置生效。

可选优化方案（Webpack处理样式） #

如果希望统一用Webpack管理样式资源，可以改用Yarn安装Bulma：

yarn add bulma bulma-extensions

然后在app/javascript/packs/application.js中导入样式：

import 'bulma/css/bulma.css'
import 'bulma-extensions/dist/css/bulma-extensions.min.css'

同时在布局文件中替换为Webpack的样式引入标签：

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

内容的提问来源于stack exchange，提问作者Nguyencuc2320