Rails 6搭配Webpacker及SCSS失效、Bootstrap样式不加载问题咨询

问题描述 #

我目前遇到两个独立问题（二者也可能存在关联，只是我暂未发现关联点）：我的应用原本可以正常加载Bootstrap样式，现在已完全失效。

问题1 #

只要我对application.js做任何修改，哪怕只是在文件任意位置添加一个换行符，都会导致已导入的Bootstrap文件失效，Bootstrap样式完全无法正常显示。

问题2 #

我在application.html.erb的head标签中添加如下代码：

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

但在浏览器中该位置没有任何渲染输出，实际渲染结果为：

<!-- before -->

<!-- after -->

我不确定这是不是Webpacker导致的问题。

修复方案 #

问题2修复（stylesheet_pack_tag无输出） #

• 打开config/webpacker.yml配置文件，找到开发环境对应的配置项，将extract_css的值修改为true。Webpacker默认开发环境下extract_css为false，样式会被打包进JS文件中，此时stylesheet_pack_tag不会生成任何HTML输出，这是该问题的核心原因。
• 修改配置后重启Webpacker服务即可生效。

问题1修复（修改application.js后Bootstrap样式失效） #

• 开启extract_css后样式会被单独打包为独立的CSS文件，不再依赖JS的注入逻辑，修改JS文件触发热重载时也不会影响样式加载，大部分情况下开启该配置后问题1会同步解决。
• 确认application.js中Bootstrap样式的导入逻辑正确，推荐将Bootstrap的引入放在独立的样式文件（如app/javascript/stylesheets/application.scss）中，再在application.js内导入该样式文件，避免直接引入node_modules内文件出现路径异常。
• 若仍存在异常，可运行rails webpacker:clobber清除Webpacker的历史打包缓存，再重启服务重新打包即可。

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