Rails 4 sass application file doesn't read in css file imported

Question

This is my application.css.sass :

@import "global.css.sass"
@import "bootstrap.css"

When I look at the source at my localhost application.css?body=1 I see this:

@import url(bootstrap.css);

    #content-wrap {
      width: 90%;
      margin: 0 auto; }

So the global.css.sass contains this :

#content-wrap
  width: 90%
  margin: 0 auto

So that was imported appropriately, but not bootstrap.css file. And it works on the localhost because its on the file path locally. However in production my assets are on aws:

application-a0546f0315a891e8129e1f8e49eb7e45.css

When looking at source the content is the same as on my localhost, however there is not bootstrap on the path so that file is missing, and I wonder why isn't it all bundled in all one big application file, here are my assets related config.

Development :

config.assets.compress = false
config.assets.digest = false

Production :

  config.serve_static_assets = false

  # Compress JavaScripts and CSS
  config.assets.compress = true

  # Don't fallback to assets pipeline if a precompiled asset is missed
  config.assets.compile = false

  # Generate digests for assets URLs
  config.assets.digest = true

What am I doing wrong here? Any help is appreciated

Update :

This is sample bit from my chrome console :

Request URL:http://my-bucket.s3.amazonaws.com/assets/bootstrap.css
Request Method:GET
Status Code:403 Forbidden

Have a look in the sass docu @import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule. Do you get any 404 on your console by any chance? I think the bootstrap.css is not beeing published in your productive environment. The lazy solution would be to refactor to bootstrap.scss and let it be merged into your application.css — Nico O
– Nico O, Commented Sep 2, 2014 at 16:44
@NicoO Thanks for your response. Yes I get 403 error. Regardless of error type the file bootstrap.css is not on the AWS. I think the bootstrap.css is not beeing published in your productive environment Yes this is true. Not sure why it isn't being bundled into my application.css — Gandalf StormCrow
– Gandalf StormCrow, Commented Sep 2, 2014 at 16:54
Because of the extention .css. You use a classic css import which is unequal to the sass @import function. Rename the bootstrap.css to bootstrap.scss (in the file and in the import) and it should work. — Nico O
– Nico O, Commented Sep 2, 2014 at 16:57

Nico O · Accepted Answer · 2014-09-02 17:27:19Z

Have a look in the SCSS Documentation, that explains the @import function from SCSS.

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

If the files extension is .css.

If the filename begins with http://.

If the filename is a url().

If the @import has any media queries

It's important to see the difference between the usge of @import rule from css and the @import given by SCSS.

When you write this in your scss file:

@import "somefile.css"

The file somefile.css will not be merged within your scss compiled file. SASS will just compile this to the css @import rule, causing a http request to look for somefile.css on your server.

You can either want this, and upload somefile.css to the server under the correct path, or you just rename somefile.css to somefile.scss and change the import to @import "somefile.scss". Like this SASS will merge somefile.scss to the compiled file.

Collectives™ on Stack Overflow

Rails 4 sass application file doesn't read in css file imported

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related