CODEWITHSUNDEEP
ruby-on-railsrubytwitter-bootstrapasset-pipeline
David O'Regan
David O'Regan

Reputation: 2674

@import "bootstrap" Cannot resolve import into sass/scss

Making a small RoR application and have run into a interesting issue via importing bootstrap using the asset manager.

Very simply,

In my gem file I have 

source 'https://rubygems.org'
ruby '2.0.0'

gem 'rails', '4.0.5'
gem 'bootstrap-sass'
gem 'sprockets', '2.11.0'
gem 'bcrypt-ruby'
gem 'faker'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'simplecov'

group :development, :test do
  gem 'sqlite3'
  gem 'rspec-rails'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
  gem 'factory_girl_rails'
  gem 'cucumber-rails', '1.4.0', :require => false
  gem 'database_cleaner', github: 'bmabey/database_cleaner'
end

gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'

group :doc do
  gem 'sdoc', '0.3.20', require: false
end

I created a custom.css.scss file and added the line:

@import "bootstrap";

The issue is, my IDE (Rubymine) tells me that it cannot resolve the import of bootstrap but the file compiles and runs.

However, when is start the server, bootstrap only half works i.e. some of the styling is applied but a lot of it isn't.

I am at a loss of how to fix this unless I use a relative path + the bootstrap folder but Im trying to avoid that.

Link to the repo below:

https://github.com/Oregand/RateMyCourseV2

Upvotes: 0

Views: 1921

Answers (3)

user3097405
user3097405

Reputation: 823

In application.css.scss:

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

Do not use *= require_self and *= require_tree if you are using Sass.

Upvotes: 1

Csteele5
Csteele5

Reputation: 1292

I solved the same issue by doing something similar to what Mario suggested, but instead of 

*= require bootstrap

I did

*= require_bootstrap

like the rest of the requires

and the import was resolved, despite my editor giving me a warning for the lines

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

Upvotes: 1

Mario
Mario

Reputation: 25

Try adding a line in application.css 

*= require bootstrap

before

*= require_tree .
*= require_self
*/

and remove

@import "bootstrap";

Upvotes: 1

Related Questions