stylesheet_pack_tag 在使用 webpacker gem 的 Rails 5.1 中找不到 app/javascript/src/application.css

2024-04-02

当我尝试使用 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-server旁边的rails server。我使用以下方法创建了该应用程序:

rails new myapp --webpack bundle bundle exec rails webpacker:install:react

我有一个 CSS 文件app/javascript/src/application.css。 (这样写让我感觉有些不对劲。将css放在javascript目录中似乎不合适。)

我只定义了单根路由root to: 'home#welcome'.

Here is 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

我不想预先添加太多细节,以免它们更分散注意力而不是有帮助。请询问其他问题,我将添加我的问题。谢谢!


在你的 application.js 中:

import "path to application.css"
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

stylesheet_pack_tag 在使用 webpacker gem 的 Rails 5.1 中找不到 app/javascript/src/application.css 的相关文章

  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)?

    Premise 我找到了这两个答案 但我不明白如何将它系统地应用于许多库 检测并记录外部 JavaScript 或 CSS 资源加载失败的情况 https stackoverflow com questions 5683824 detect
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • 最大宽度调整以适应文本?

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有
  • 为什么 IE8 在我的图像锚标记上添加底部边框?

    我知道 这很可悲 但今天早上 IT 刚刚在我的机器上安装了 IE8 我立刻遇到了一个明显的问题 尽管我知道答案就在我面前 但我已经把它搞砸了太久了 首先 这是网站 www mchenry edu http www mchenry edu 在
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 在 R 中,如何将两个 XML 文档合并为一个文档?

    我正在从基于 XML 的 API 查询数据 API 响应是分页的 因此我必须进行大量查询才能获取完整的数据集 Using read xml来自xml2包中 我可以轻松地发出每个请求并将其保存为 XML 文档 但我一直无法弄清楚如何使用该库将
  • 类型错误:(0,_schemaUtils.default)不是函数

    我有一个简单的 React 应用程序创建create react app在本地主机上运行良好 我现在正在尝试 Dockerify 该应用程序 这是我的 package json name yeet version 0 1 0 engines
  • SSIS 2008 中 ADO NET 源和 OLE DB 源之间的区别?

    谁能说出 SSIS 2008 中 ADO NET 源和 OLE DB 源之间的区别 它们在任何上下文中都相同吗 对于小型数据集 SSIS 2008 中的 ADO NET 源和 OLE DB 源之间几乎没有什么区别 它们之间的区别在于它们与其
  • 作为承诺的结果表示重新发送

    我不明白发生了什么事 Using q承诺 这有效 const deferred q defer deferred resolve Hellow const myPromise deferred promise router get item
  • OpenGL 统一缓冲区 std140 布局

    我正在尝试通过 GeForce 8600 GT 上的统一块将整数数组传递给片段着色器 一切均根据 GLSL version 330 在应用程序方面我有 int MyArray 7102 filling binding etc glBuffe
  • 为控制台应用程序制作 UI [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 如何为控制台应用程序制作一个界面 使它们看起来像edit com在微软的操作系统下 目标语言是 C C 和 C NET 看一下curs
  • 如何将序列中的下一个值放入变量中?

    因此 我正在编写一个存储过程 但无法将序列的下一个值放入变量中 序列名称被传递到函数中并存储为varchar2多变的 如何将该序列中的下一个值放入局部变量中 像这样的东西吗 create or replace procedure next
  • gulp 命令给出找不到模块的错误

    我正在尝试在 Windows 上设置基本的 aurelia 应用程序 我已遵循以下指示 http aurelia io get started html http aurelia io get started html 包括 安装节点js
  • 如何获取宿主元素引用?

    如何获取 Angular 2 中的宿主元素引用 就我而言 我想知道我的组件是否有焦点 您可以使用以下方式获取宿主元素引用 class MyComponent constructor private elRef ElementRef cons
  • 为什么我不应该有一个单一的整体实用程序库?

    我们有一些通用库 C 但我想这不是特定于平台或语言的 我们称它们为 A B 和 C 库 A 引用了 B 和 C 库 B 引用了第三方 DLL 库 C 是独立的 三个独立项目背后的想法是 每个库都有不同的功能 但随着时间的推移 库 A 或多或
  • mysql 使用另一个表中的值更新列

    我有两张桌子 看起来都像 id name value 1 Joe 22 2 Derk 30 我需要复制的值value from tableA to tableB基于每个表中的检查名称 对此有何建议UPDATE陈述 除了这个答案之外 如果您需
  • 连接表达式以获取数据帧的子集

    我正在尝试创建一个函数来计算子集数据框中列的平均值 这里的技巧是 我总是想要有几个子集条件 然后可以选择将更多条件传递给函数以进一步子集数据帧 假设我的数据如下所示 dat lt data frame var1 rep letters 26
  • Paster db init -c XXXX/development.ini 不适用于 CKAN 命令“db”不知道

    我是 CKAN 和 python 的第一次用户 我的大部分开发都是在 NET 我是第一次在 Windows 7 计算机上设置 CKAN 我正在尝试运行该行 paster db init c FOLDER NAME development i
  • PHP中如何获取最后修改的文件?

    我想创建一个列表 列出上次修改的文件的名称 http www searchr us web search 我想在我的主页上显示这些文件名 它们应该根据上次修改的文件进行更改 你可以使用这个功能 function listdir by dat
  • 调用未定义函数password_hash()

    我正在开发我的网站时 现在正在本地主机上运行 php 版本 5 4 16 我想用password hash 但我不断收到此错误 致命错误 调用未定义函数password hash dir to file php在线的123 为什么会发生这种
  • 如何加载目录中的所有文件?

    正如标题所说 如何加载目录中的每个文件 我对c 和lua都感兴趣 编辑 对于 Windows 我很高兴能得到一些真正的工作代码 尤其是 lua 我可以用 boost filesystem for c 来做 对于 Lua 你需要模块Lua文件
  • Heroku 30 秒超时(长外部查询)的解决方法

    注意 这篇文章中的某些内容可能不是最佳实践 被警告 我正在开发一个连接到微实例 AWS 服务器的管理仪表板 该数据库拥有数千万条记录 大多数查询都会在几秒钟内返回 但有些查询需要长达一两分钟的时间才能返回 这取决于我无法控制的一些事情 由于
  • GHC如何实现unsafePerformIO?

    从 开始unsafePerformIO并以 RTS libc 或操作系统 API 结束 GHC 如何实现 IO 我试图了解当标准前奏不可用时 IO 在 Haskell 中如何工作 例如 如果我们出于某种原因自己实现标准前奏 我原本希望在 G
  • 寻找参考nodejs,expressjs和mongodb应用程序用作模板

    我想构建一个 Nodejs 应用程序 并且正在寻找一个很好的参考应用程序来用作模板 理想情况下 该应用程序应具有以下功能 使用nodejs expressjs 和 mongodb 有一个用户认证子系统 我想下载这样一个应用程序并让它开箱即用
  • stylesheet_pack_tag 在使用 webpacker gem 的 Rails 5.1 中找不到 app/javascript/src/application.css

    当我尝试使用 webpacker 在新的 Rails 5 1 应用程序中加载页面时 收到此错误 我希望 webpacker 也能处理 CSS Started GET for 1 at 2017 09 01 12 20 23 0400 Pro