为了更好地澄清这一点。这是基于我的当前理解,它似乎已经足够好用了,但仍然可能不完全准确。
通过资源管道处理的CSS使用css_link_tag
进行引用,通过Webpacker JavaScript包导入的CSS则使用css_pack_tag
进行引用。
资源管道中的CSS位于app/assets/stylesheets
。Webpack中的CSS位于app/javascripts/wherever_you_want
。
因此,在Webpack中,所有导入到JavaScript包中的CSS最终都会被提取到一个可供服务的文件中,该文件可以通过与js包相同的名称进行引用。
因此,如果在app/javascripts/application.js
中有以下内容:
import 'app/javascripts/css/one.css'
import 'app/javascripts/css/two.css'
import 'app/javascripts/css/three.css'
这些将被引用为
css_pack_tag 'application'
这在我的部署日志中显示为:
Entrypoints:
application (430 KiB)
css/application-9d82d487.css
js/application-9f45d7ff735a7a203f28.js
值得注意的是,正如上面提到的,此行为受“extract_css”设置的影响。在开发环境中,默认情况下可能是错误的,在生产环境中可能是正确的。但需要注意的一点是,在我的情况下,即使在开发环境中删除了“css_pack_tag”,也没有任何影响,因为它没有被本地提取。它仍然“工作”,因为CSS在JavaScript中加载,并以某种方式应用。所以在理解之前,我删除了这些标签,认为它们是不必要的。不幸的是,当我后来在Heroku上部署时,我的CSS都没有工作,花了我一段时间才弄清楚原因并记住我已经删除了这些“css_pack_tag”行。请注意保留HTML标签。
extract_css
......这太重要了 @rossta :praying_hands: - VegaStudios.scss
文件没有加载。谢谢@rossta! - vkozyrev