css – 如何实现bootstrap 4和rails 5

前端之家收集整理的这篇文章主要介绍了css – 如何实现bootstrap 4和rails 5前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是 ruby的新手,我正在尝试将bootstrap 4.0.0.alpha4包含到rails 5.0.0中.
我已经安装了gems bootstrap,bootstrap-sass,autoprefixer-rails,我甚至在application.css.sass中使用了@import“bootstrap”,但我仍然没有在页面获取引导程序.我有一个按钮查看我在哪里尝试实现bootstrap设计.我甚至在不同的项目上尝试过它们都没有用.任何帮助,将不胜感激.谢谢.
代码如下所示.
宝石文件
  1. source 'https://rubygems.org'
  2.  
  3.  
  4. # Bundle edge Rails instead: gem 'rails',github: 'rails/rails'
  5. gem 'rails','~> 5.0.0'
  6. # Use postgresql as the database for Active Record
  7. gem 'pg','~> 0.18'
  8. # Use Puma as the app server
  9. gem 'puma','~> 3.0'
  10.  
  11. gem 'bootstrap'
  12. gem 'bootstrap-sass'
  13. gem 'autoprefixer-rails'
  14.  
  15. gem 'wdm'
  16. # Use SCSS for stylesheets
  17. gem 'sass-rails','~> 5.0'
  18. # Use Uglifier as compressor for JavaScript assets
  19. gem 'uglifier','>= 1.3.0'
  20. # Use CoffeeScript for .coffee assets and views
  21. gem 'coffee-rails','~> 4.2'
  22. # See https://github.com/rails/execjs#readme for more supported runtimes
  23. # gem 'therubyracer',platforms: :ruby
  24.  
  25. # Use jquery as the JavaScript library
  26. gem 'jquery-rails'
  27. # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
  28. gem 'turbolinks','~> 5'
  29. # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
  30. gem 'jbuilder','~> 2.5'
  31. # Use Redis adapter to run Action Cable in production
  32. # gem 'redis','~> 3.0'
  33. # Use ActiveModel has_secure_password
  34. # gem 'bcrypt','~> 3.1.7'
  35.  
  36. # Use Capistrano for deployment
  37. # gem 'capistrano-rails',group: :development
  38.  
  39. group :development,:test do
  40. # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  41. gem 'byebug',platform: :mri
  42. end
  43.  
  44. group :development do
  45. # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  46. gem 'web-console'
  47. gem 'listen','~> 3.0.5'
  48. # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  49. gem 'spring'
  50. gem 'spring-watcher-listen','~> 2.0.0'
  51. end
  52.  
  53. # Windows does not include zoneinfo files,so bundle the tzinfo-data gem
  54. gem 'tzinfo-data',platforms: [:mingw,:mswin,:x64_mingw,:jruby]

解决方法

伟大的 link
这是我的配置:

的Gemfile:

  1. gem 'compass-rails','2.0.4'
  2. gem 'bootstrap-sass','~> 3.1.1.1'
  3. gem 'autoprefixer-rails','6.3.7'
  4. gem 'sass-rails','~> 5.0.1'

配置/初始化/ assets.rb

  1. Rails.application.config.assets.version = '1.0'
  2. Rails.application.config.assets.paths << Rails.root.join('app','assets','fonts')

在我的sass文件树上:

  1. app/assets/stylesheets
  2. |
  3. |--components
  4. | |
  5. | |--variables,| |--mixins and another css/sass files
  6. |
  7. |--bootstrap.sass
  8. |--application.sass

application.sass:

  1. @import 'bootstrap'
  2. @import 'components/*'

bootstrap.sass:

  1. // Core variables and mixins
  2. @import 'bootstrap/variables'
  3. @import 'bootstrap/mixins'
  4.  
  5. // Reset
  6. @import 'bootstrap/normalize'
  7. //@import 'bootstrap/print'
  8.  
  9. // Core CSS
  10. //@import 'bootstrap/scaffolding'

标题

= stylesheet_link_tag’应用’,媒体:’全部’

猜你在找的CSS相关文章