Error compiling css file rails 4 [duplicate] - html

Question

This question already has an answer here:
Sass and Compass weird css errors after install
(1 answer)
Closed 8 years ago.
I recently bought a new theme for my website, I wanted to include the new file in the application.css.sass:
#import "custom.css.sass"
And I get this error :
Invalid CSS after "#ffffff": expected expression (e.g. 1px, bold), was ";"
(in development/myapp/app/assets/stylesheets/application.css.sass:142)
The css file is working just fine in it's own with html file, what do I do?
Update
Some css arround 142 :
.notification_error,
.notification_ok {
background: #ffffff;
border:#e6e6e6 1px solid;
}
.notification_error:after,
.notification_ok:after {
background: #e6e6e6;
}
.shortcode_tab_item_title {
border:#e6e6e6 1px solid;
}
Also if I import :
#import "custom.css"
All works just fine, however if I use just .css my assets are not loaded on heroku.
UPDATE II: This is my Gemfile
source 'https://rubygems.org'
ruby '2.0.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use postgres
gem 'pg', '0.12.2'
# soft deleted
gem "paranoia", "~> 2.0"
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# background jobs
gem 'delayed_job_active_record'
# rack options
gem 'rack-rewrite'
# static pages
gem 'high_voltage', '~> 2.2.1'
#haml templates
gem 'haml-rails', '~> 0.4'
#youtube like ids
gem 'hashids'
#better form
gem 'simple_form'
#password digest stuff
gem 'bcrypt-ruby', '3.1.2', :require => 'bcrypt'
#aws stuff
gem 'aws-s3', :require => 'aws/s3'
gem 'aws-sdk'
gem 'fog'
gem 'carrierwave'
#assets
gem 'sprockets-rails', '~> 2.0.0', :require => 'sprockets/railtie'
gem 'asset_sync'
gem 'sass-rails', '~> 4.0.2'
gem 'compass-rails', '1.1.2'
gem 'coffee-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
group :development do
gem 'annotate'
gem 'quiet_assets'
gem 'foreman'
gem 'rails_best_practices', '~> 1.14.0'
gem 'better_errors'
gem 'binding_of_caller'
gem 'guard-livereload', require: false
gem 'pry-byebug'
gem 'spring'
end
group :development, :test do
gem 'rspec-rails', '~> 2.13.0'
gem 'guard-rspec', '2.5.3'
gem 'guard-spork', :github => 'guard/guard-spork'
gem 'spork', '0.9.2'
gem 'thin'
gem 'launchy'
gem 'awesome_print'
gem 'sql_queries_count'
gem 'debugger'
gem 'oink'
end
This is my Gemfile, in case I was doing something wrong here because some stuff is taken out of the rails 4

Answer 1

The file you're trying to import is css, not sass. So rename the file to custom.css.scss. Also, you don't have to write the file extension in the #import directive, so change it to #import "custom"; . Don't forget the semicolon at the end of the line, btw.

Answer 2

The issue is simply a difference between .scss and .sass syntax:
#scss
.notification_ok {
background: #ffffff;
border:#e6e6e6 1px solid;
}
#sass
.notification_ok
background: #fff
border: #e6e6e6 1px solid
As mentioned in another answer, just change the name from custom.css.sass to custom.css.scss
--
Further, you'll also want to just use the following:
#import "custom"