15

I am relatively new to programming, therefore I hope that the question is not absolutely stupid.

I got a problem concerning my rails app.

I try to use bootstrap. I built a file called "custom.css.scss" and used the "@import "bootstrap"" line in it.

The problem is: Each time I save my "custom.css.scss" file a new file "custom.css" is automatically generated and I get the following message: "custom.css.scss File to import not found or unreadable:bootstrap".

The funny thing is: When I delete the file "custom.css.scss" and refresh my browser, everything is fine (which means: bootstrap is used).

Do you have any idea, what could be the reason?

Kindest regards Chris

P.S.: This is my installed gem file

source 'https://rubygems.org'

gem 'rails', '3.2.11'
gem 'bootstrap-sass', '2.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem 'jquery-rails', '2.0.2'

group :development, :test do
  gem 'sqlite3', '1.3.5'
  gem 'rspec-rails', '2.11.0'
  # gem 'guard-rspec', '1.2.1'
  # gem 'guard-spork', '1.2.0'  
  # gem 'spork', '0.9.2'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '3.2.5'
  gem 'coffee-rails', '3.2.2'
  gem 'uglifier', '1.2.3'
end

group :test do
  gem 'capybara', '1.1.2'
  gem 'factory_girl_rails', '4.1.0'
  gem 'cucumber-rails', '1.2.1', :require => false
  gem 'database_cleaner', '0.7.0'
  gem 'launchy', '2.1.0'
  # gem 'rb-fsevent', '0.9.1', :require => false
  # gem 'growl', '1.0.3'
end

group :production do
  gem 'pg', '0.12.2'
end

The custom.css.scss file look like this

@import "bootstrap";

/* universal */

html {
    overflow-y:scroll
}

body {
    padding-top: 60px
}

section {
    overflow: auto;
}

textarea {
    resize: vertial;
}

.center {
    text-align: center;
}

.center h1 {
    margin-bottom: 10px;
}

/* typography */

h1, h2, h3, h4, h5, h6 {
    line-height: 1
}

h1 {
    font-size: 3em;
    letter-spacing: -2px;
    margin-bottom: 30px;
    text-align: center;
}

h2 {
    font-size: 1.7em;
    letter-spacing: -1px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: normal;
    color: #999;
}

p {
    font-size: 1.1em;
    line-height: 1.7em;
}
Promise Preston
  • 24,334
  • 12
  • 145
  • 143
BiallaC
  • 167
  • 1
  • 1
  • 6
  • Could you post what `custom.css.scss` looks like where you're doing the import? – Zkoh Jan 11 '13 at 12:43
  • Sure. It looks like this: @import "bootstrap"; /* universal */ html { overflow-y:scroll } body { padding-top: 60px } section { overflow: auto; } textarea { resize: vertial; } .center { text-align: center; } .center h1 { margin-bottom: 10px; } /* typography */ h1, h2, h3, h4, h5, h6 { line-height: 1 } h1 { font-size: 3em; letter-spacing: -2px; margin-bottom: 30px; text-align: center; } h2 { font-size: 1.7em; letter-spacing: -1px; margin-bottom: 30px; text-align: center; font-weight: normal; color: #999; } p { font-size: 1.1em; line-height: 1.7em; } – BiallaC Jan 11 '13 at 13:05
  • 2
    Did you: 1) run "bundle install" after editing your Gemfile and 2) restart your rails server? – Jesse Wolgamott Jan 11 '13 at 13:39
  • Yes, I did both. But it does not work... – BiallaC Jan 11 '13 at 13:45
  • I found out something else, what' very strange. Each time I add a new controller for example with the name "test" rails build up two files in the stylesheets directory: test.css and test.css.scss – BiallaC Jan 11 '13 at 15:06
  • Okay, I think I got it. I am using the App LiveReload and I ticked the box: "Compile SASS..." - this probably generated the issue! Thanks for your help! Regard Chris – BiallaC Jan 11 '13 at 15:19
  • This helped me: https://github.com/anjlab/bootstrap-rails/issues/35#issuecomment-10491002 Thanks, Jignesh – Jignesh Gohel May 27 '13 at 08:04

9 Answers9

17

I had a similar problem and saw Habax's solution and tried the last step first.

I just restarted the server.

That turned out to be enough. Hope that helps.

Omar Khafagy
  • 171
  • 1
  • 3
6

I had a similar issue, and I changed the file type from css to scss. I bet if you erase '.css' from your file name it'll work.

Travis Heeter
  • 13,002
  • 13
  • 87
  • 129
5

I had a similar issue when working on a Rails 6 application with Bootstrap 4.

The issue was that I did not specify the node modules full path of the bootstrap.scss file in my app/assets/stylesheets/application.scss file.

After installing Bootstrap 4 and its dependencies using this command:

yarn add bootstrap jquery popper.js

All I needed to do was to modify it from:

@import "bootstrap";

to

@import 'bootstrap/scss/bootstrap';

You can then add require the boostrap.js file in the app/javascript/packs/application.js file this way:

require("bootstrap");

That's all.

I hope this helps

Promise Preston
  • 24,334
  • 12
  • 145
  • 143
2

Had the same issue in a new application, but restarting the development server solved the issue.

Kosmas
  • 31
  • 3
2

facing same problem. I rename custom.css.scss to custom.css and I specified version of ruby in Gemfile. and bundle install . in my case: ruby '2.0.0'

Ajay Barot
  • 1,681
  • 1
  • 21
  • 37
1

I had this same problem, solved by fixing bootstrap-sass and sass-rails versions to:

gem 'sass-rails', '~> 3.2'
gem 'bootstrap-sass', '~> 2.3.1.0'

And then bundle install and server restart.

Habax
  • 1,274
  • 17
  • 26
1

I just want to past my resolution as a reference. I have also encountered this issue today. if you also using emacs with scss mode it may be helpful. as default when you save scss file emacs will auto-compile these scss file and create a responding .css file. then you just need to delete these .css file. or put below code to .emacs as permanent fix

(setq scss-compile-at-save nil) ;; disable the auto-compilation
ryu
  • 651
  • 9
  • 23
1

I got the same problem of "File to import not found or unreadable: bootstrap" in my scss file. I just solved by adding require statement of "bootstrap-sass" to config.ru file. My config.ru is like the following.

# This file is used by Rack-based servers to start the application.

require ::File.expand_path('../config/environment',  __FILE__)
require 'bootstrap-sass' #require statement of bootstrap-sass
run Rails.application
Nay Lin Aung
  • 725
  • 1
  • 9
  • 21
0

Running npm install resolved the issue for me.

radihuq
  • 999
  • 10
  • 13