在使用Webpacker Gem的Rails 5.1中,stylesheet_pack_tag无法找到app/javascript/src/application.css。

25

当我尝试使用webpacker加载新的rails 5.1应用程序中的页面时,出现了以下错误。我希望webpacker也能处理CSS。

Started GET "/" for ::1 at 2017-09-01 12:20:23 -0400
Processing by HomeController#welcome as HTML
  Rendering home/welcome.html.erb within layouts/application
  Rendered home/welcome.html.erb within layouts/application (0.4ms)
Completed 500 Internal Server Error in 28ms



ActionView::Template::Error (Webpacker can't find application.css in /Users/myusername/Documents/testing-ground/myapp/public/packs/manifest.json. Possible causes:
1. You want to set wepbacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. Webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your Webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/application-1ba6db9cf5c0fb48c785.js",
  "hello_react.js": "/packs/hello_react-812cbb4d606734bec7a9.js"
}
):
     7:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     8:     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
     9:     <%= javascript_pack_tag 'application' %>
    10: <%= stylesheet_pack_tag 'application' %>
    11:   </head>
    12:
    13:   <body>

app/views/layouts/application.html.erb:10:in `_app_views_layouts_application_html_erb__1178607493020013329_70339213085820'

我正在运行./bin/webpack-dev-serverrails server一起。我使用以下命令创建了应用程序: rails new myapp --webpack bundle bundle exec rails webpacker:install:react 我只有一个CSS文件app/javascript/src/application.css。(写这个让我感觉有些不对劲。将CSS放在JavaScript目录中似乎是不合适的。)
我只定义了一个根路由root to: 'home#welcome'
这是app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>

    <%= javascript_pack_tag 'application' %>
    <%= stylesheet_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

这是我的config/webpacker.yml文件(我也尝试在开发环境中将编译设置为false)。
# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  dev_server:
    host: localhost
    port: 3035
    hmr: false
    https: false

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production demands on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

我不想一开始就加太多细节,以免分散大家的注意力。如果还有其他问题,请随时询问,我会在我的问题中添加。谢谢!


你是如何解决这个问题的? - Maysam Torabi
这可能会帮助未来的任何人 https://dev59.com/CLfna4cB1Zd3GeqPlg6y - Siva Ganesh
9个回答

18

在你的application.js文件中:

import "path to application.css"

1
很棒的答案。令人惊讶的是这个地方没有记录。 - sambecker
1
这个也解决了我的问题...但是为什么我需要在我的application.js中添加这一行呢? - Pioz
你可以在Webpacker文档中查看此内容,链接在这里:https://github.com/rails/webpacker/blob/master/docs/css.md#css-sass-and-scss。 - techpeace

9

我曾经遇到过这个问题,在Rails 5.2和Webpack的当前版本(2018年12月5日,4.2.x?),并且刚刚解决了它。

对我来说,解决方法是将application.css重命名为其他任何名称。我认为这与Webpack存在命名冲突有关。

现在我的打包标签看起来像:

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

我不需要在application.js内导入样式表,对我来说似乎没有任何区别。

附加奖励: 我还将app/javascript重命名为app/webpack,因为我认为从Javascript目录运行样式表很令人困惑(并从这个YouTube视频中了解到可以这样做:https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s)。只需简单地执行以下操作:

  1. 将目录重命名为app/webpack
  2. 像这样调整webpacker.ymlsource_path: app/webpack

希望这可以帮到你。


我还必须将文件扩展名更改为除.css之外的其他内容(例如.scss)。否则,Webpack会在清单文件中将其列为.js - Steve Beer
谢谢你, 兄弟! 我只需要重命名我的文件,现在变成了 base.css. - Elliott McNary

3

当设置HMR为false时,样式将内联在包中,因此您不会得到任何CSS包。 在您的webpacker.yml文件中,将HMR设置为true应该可以解决您的问题。 我意识到这是一个旧问题,但仍然相关。


1
在“config/environments/production.rb”中:
config.public_file_server.enabled = true

删除 "public/assets" 和 "public/pack",然后运行:
RAILS_ENV=production bundle exec rake assets:precompile

0

我曾经遇到过同样的问题,并通过在控制台中运行 yarn add postcss-smart-import 命令来解决它。

更新:rails 5.2,webpacker 3.5,默认配置。


0
我清除了Webpacker的缓存,然后它又开始正常工作了:
rm -rf tmp/cache/webpacker

0

即使在application.js中有import "path/to/application.css"行,我仍然遇到了这样的问题。

在我的情况下,这是因为测试资产是使用不同的node版本预编译的。

node模块是使用node版本v12安装的,但测试资产是使用node版本v10编译的。

资产已经编译完成,但当我查看public/pack-test/application.[hash].js并搜索application.scss时,我看到一个关于缺少node-sass的错误行。

在我的情况下,问题出在Rubymine IDE上 - 它以某种方式缓存了$PATH值,这是我在nvm中拥有默认node版本v10的时间。

我希望我的经历能够帮助未来遇到类似问题的人。


0

我在Rails 6.0.3.1中遇到了这个问题。 我更新了文件app/assets/config/manifest.js

//= link_directory ../../javascript/packs
//= link_directory ../images

然后在您的终端中重新启动:

bin/webpack-dev-server

0

修改安装指南

如果最近有更改,而您不确定是否需要关注,请使用 git story 修改 webpacker 的版本(在 package.jsonGemfile.lock 中)。

当您进行修改时,所有主要错误都将被修复:官方安装指南

例如,对于我来说,在修改后,我需要在 /packs/application.js 中添加一些文件,并在文件顶部包含以下内容:

import 'core-js/stable'
import 'regenerator-runtime/runtime'

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接