Bootstrap 没有路由 CSS 或 JavaScript？没有路线匹配 [GET] "/css/bootstrap.css"答案

【问题标题】：Bootstrap not routing CSS or JavaScript? No route matches [GET] "/css/bootstrap.css"Bootstrap 没有路由 CSS 或 JavaScript？没有路线匹配 [GET] "/css/bootstrap.css"
【发布时间】：2026-01-08 20:55:01
【问题描述】：

Rails 4.1.1
Ruby 2.0
Webrick 服务器

我正在尝试让bootstrap-sass 第一次在开发中工作。我尝试按照 GitHub 说明、Bootstrap 网站说明和其他几个视频，让我看起来可以安装 gem、拖放文件、更新 application.css.scss 文件并在应用程序索引页面中引用 css 文件，在视图中调用一些 css 就可以了。

当我检查页面的源代码（其中包含我在 application.index.erb 文件中放入的 Bootstrap 引用）以确认 Bootstrap 正在工作时，我收到错误消息。代码在那里，但是我点击 css 链接以确认它的工作并得到这个：

No route matches [GET] "/css/bootstrap.css"

这是我的application.css.scss 文件：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets"
@import "bootstrap"

即使我处于开发模式，我将生产文件设置为：

  config.serve_static_assets = true

一定是路由问题，但我不明白为什么我的资产管道没有让 css 和 js 在开发模式下可用？

另外，这是我的 gem 文件：

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use mysql as the database for Active Record
gem 'mysql2'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Bootstrap-sass - Latest Version for Web Design (CSS and HTML Layout)
gem 'bootstrap-sass', '~> 3.2.0'
# Vendor Prefixes
gem 'autoprefixer-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Simple_form - Forms made easy! Top form generator on ruby-toolbox.com
gem 'simple_form'

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw]

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.0'

# Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'

# Use CoffeeScript for .js.coffee assets and views
 gem 'coffee-rails', '~> 4.0.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby

# Use jquery as the JavaScript library
 gem 'jquery-rails'

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

[更新]

这是完整的错误页面[网址是：http://localhost:3000/css/bootstrap.css#]：

Routing Error
No route matches [GET] "/css/bootstrap.css"

Rails.root: C:/Users/Kevin/Desktop/sites/solar_permit

Application Trace | Framework Trace | Full Trace
Routes

Routes match in priority from top to bottom

Helper         HTTP Verb    Path                         Controller#Action
Path / Url          
root_path            GET            /                            projects#index
projects_path    GET            /projects(.:format)          projects#index
                     POST           /projects(.:format)          projects#create
new_project_path     GET            /projects/new(.:format)          projects#new
edit_project_path    GET            /projects/:id/edit(.:format)     projects#edit
project_path     GET            /projects/:id(.:format)          projects#show
PATCH                           /projects/:id(.:format)          projects#update
PUT                                 /projects/:id(.:format)          projects#update
DELETE                          /projects/:id(.:format)          projects#destroy
GET|POST            /:controller(/:action(/:id))(.:format)          :controller#:action

这是应用程序布局文件：

<!DOCTYPE html>
<html>
<head>
  <title>SolarPermit</title>
 <link href="/css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
 <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
<div class="container">
    <ul class="nav nav-tabs">
        <li><%= link_to "Home", root_path %></li>
    </ul>
<%= yield %>
</div>

</body>
</html>

【问题讨论】：

你确定文件名是application.css.scss吗？尝试在@import 行的末尾添加;
是的，我只是仔细检查了一遍，然后我尝试了 ;他们没有工作......
您能粘贴应用程序布局文件的头部部分吗？
刚刚更新——这是最后一段代码。

标签： css ruby-on-rails twitter-bootstrap bootstrap-sass

【解决方案1】：

所以我设法通过以下方式解决了这个问题：

ExecJS::RuntimeError in Users#index (RoR)

尽管它说删除“//= require_tree”忽略了这个问题，但我一直在尝试修复在我安装 node.js 并更改 UTF 信息后不断出现的 ExecJS 错误16 到 8。尽管有人建议我绕过它，但我删除了 require_tree 评论。

我确信以后会出现更多错误，但根据我的研究，似乎存在与 windows 和 ExecJS 不兼容的问题。我是 Ruby 的新手，所以我认为它真的与与之相关的 gem 有关吗？例如，我尝试了 therubyracer gem（如其他帖子所建议的那样）并需要 gem，但它想要安装 python 并且失败了。

无论如何，我进一步阅读，ExecJS 和 windows 存在很多问题，似乎可以通过转换到基于 linux 的开发服务器来解决。

不管怎样，现在这对我有用。

【讨论】：

【解决方案2】：

这不是在 rails 中包含资产的方法...您的 bootstrap.css 位于何处？

除了 `/css/bootstrap.css' 和 'js/bootstrap.js'，您可以像这样包含完整的资源库（这没有 turbolinks）：

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>

这是涡轮链接：

<%= stylesheet_link_tag    'application', media: 'all', :"data-turbolinks-track" => true %>
<%= javascript_include_tag 'application', :"data-turbolinks-track" => true %>
<%= csrf_meta_tags %>

如果你只想包含上面的文件（application.css.scss），那么你应该添加：

<link href="/assets/application.css" rel="stylesheet" media="screen">

其中包含bootstrap。

另一方面，我认为您应该将 @import 指令保留在 application.css 文件之外，顺便说一下，不应将其命名为 application.css.scss。

然后，在一个新文件（例如 main.css.scss）中添加 @import 指令。这是最常见的方法，我认为是正确的方法。所以：

application.css（不是 .scss）：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

main.css.scss：

@import "bootstrap-sprockets";
@import "bootstrap";

【讨论】：

我的 css 文件位于我的资产管道 (../app/stylesheets/) 中。当我将提供的代码（复制和粘贴）添加到我的标记（正确？）时，我收到另一个错误，即 Projects#index 中的 ExecJS::ProgramError -- TypeError: Object does not support this property or method。这引用了“in”application.css.scss。（它现在对我尝试在应用程序中访问的所有页面都给出错误）我尝试了两个版本（w/o turbo 和 w）。 --?
试试我最后的建议？
我会在我的答案中添加更多的 cmets。
奇怪，当我删除application.css.scss中的引用，把它放在main.css中，然后在style-sheet_link_tag中引用'main'，它仍然把代码放在页面中，但是没有格式化。然后我查看源代码并得到原始错误“没有路由匹配 [GET]”/stylesheets/main.css” - 我认为这是一个资产管道问题？它似乎不是在资产管道中路由 css 引用。可以吗可能吗？现在我可以从 assets/bootstrap 文件夹中的源代码中单击并查看我的 javascript 没问题，这表明 application.js 中的引用工作正常
你不需要引用'main'，它已经在=require_tree .中引用了