当我尝试使用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'
我正在与rails server一起运行./bin/webpack-dev-server.我使用以下方法创建了该应用程序：
rails new myapp --webpackbundlebundle 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
我不想预先添加太多细节，以防它们更分散注意力而不是有用。请问其他什么，我会补充我的问题。谢谢！
在您的应用程序中.js ：
import "path to application.css"
我在 Rails 5.2 上遇到了这个确切的问题，截至 2018 年 12 月 5 日，Webpack 的当前版本(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里面import样式表。 这对我来说似乎没有区别。
可选奖励：我还将app/javascript重命名为app/webpack，因为我也认为从 Javascript 目录中运行样式会令人困惑(并从这个 youtube 视频中了解到它可以做到：https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s)。 只是：
- 将目录重命名为
app/webpack - 像这样调整
webpacker.yml：source_path: app/webpack
希望有帮助。
当 HMR 设置为 false 时，样式将内联在捆绑包中，因此您不会获得任何 css 捆绑包。 在您的 webpacker.yml 文件中，将 hmr 设置为 true 应该可以解决您的问题。 我意识到这是一个老问题。 不过，相关。
在"config/environments/production.rb"中：
config.public_file_server.enabled = true
删除"公共/资产"和"公共/包">
并运行：
RAILS_ENV=production bundle exec rake assets:precompile
我遇到了同样的问题，并通过在控制台中运行yarn add postcss-smart-import解决了它。
更新：Rails 5.2，Webpacker 3.5，默认配置。
我遇到了这个问题或Rails 6.0.3.1。 我更新了文件应用程序/资产/配置/清单.js
//= link_directory ../../javascript/packs
//= link_directory ../images
然后在终端中重新启动：
bin/webpack-dev-server
即使import "path/to/application.css"行application.js我也有这样的问题
就我而言，这是因为测试资产是使用不同的节点版本预编译的
节点模块随节点版本 v12 一起安装 但是测试资产是使用 Node 版本 v10 编译
的资产已编译，但是当我查看public/pack-test/application.[hash].js和 grepapplication.scss内部时，我看到了一条关于node-sass缺失的错误行。
在我的原因中，问题是 Rubymine IDE - 当我在 nvm 中拥有默认节点版本 v10 时，它会以某种方式缓存$PATH值。
我希望我的商店会有人，将来会遇到类似的问题。
修订安装指南
修改webpacker的版本(在package.json和Gemfile.lock与git故事)，如果你最近有变化，你担心。
修改时修复所有主要错误：安装官方指南
例如，对我来说，修改后我需要在/packs/application.js中添加一些文件，将其包含在文件顶部：
import 'core-js/stable'
import 'regenerator-runtime/runtime'
我清除了 webpacker 的缓存，它又开始为我工作：
rm -rf tmp/cache/webpacker