6

I have a stylesheet app/assets/website/base.scss that starts with:

@import "bootstrap-select.min.css";

The bootstrap-select.min.css file exists in the vendor/stylesheets/ folder. When I try to access it in production, I get a 404:

"NetworkError: 404 Not Found - http://mysite.herokuapp.com/assets/bootstrap-select.min.css"

(It works fine on my development rig though.)

Here's what I've tried so far:

  1. Tried using @import asset-path("bootstrap-select.min.css"). Got a syntax error (apparently asset-path doesn't work with imports).

  2. Tried adding config.assets.precompile += %w(bootstrap-select.min.css) to config/environments/production.rb

Any idea why this might be happening?

Rails 4.0.4 / Ruby 2.1.2

FloatingRock
  • 6,741
  • 6
  • 42
  • 75
  • import statement in css file? It's css or .scss? – Mandeep Aug 06 '14 at 20:30
  • @Mandeep it's a .scss (filename is mentioned in the first line) – FloatingRock Aug 06 '14 at 20:31
  • On development or production you don't use scss files. Why do you want to compile your scss on production. Also your html should always point to the compiled css file. So where does your final css file reside? – tgpatel Aug 06 '14 at 20:41
  • 1
    You are aware that Sass cannot import (compile) CSS files, right? Does Rails have a feature that allows you to do so? – cimmanon Aug 06 '14 at 22:28
  • @cimmanon oh, I wasn't actually. So that would make sense.. The answer is sprockets then? – FloatingRock Aug 07 '14 at 00:28
  • tgpatel: it's called 'website.css' and it resides next to the application.css file. I guess I need to use sprockets to load it up there (I come from a RequireJS background where the optimizer actually replaces @import statements with the actual code so I mistakenly assumed Rails would do the same. Thanks for the clarification. – FloatingRock Aug 07 '14 at 00:34
  • Please add an answer do I can accept – FloatingRock Aug 07 '14 at 00:34

2 Answers2

6

Ended up changing it from bootstrap-select.min.css --> bootstrap-select.min.scss ..

It worked!

Sass actually places the contents of .scss files in place - With .css files it just links to the file with an @import, which is why it wasn't working (thanks @cimmanon!)

FloatingRock
  • 6,741
  • 6
  • 42
  • 75
  • 1
    If Sass detects one of these cases: Imports where the URL ends with .css, imports where the URL begins http:// or https://, imports where the URL is written as a url(), imports that have media queries. It will identify the import as a plain CSS command. https://developer.mozilla.org/en-US/docs/Web/CSS/@import – jcamejo Jun 08 '20 at 08:49
3

Actually, you could just remove .css suffix from @import "bootstrap-select.min.css"; Sass expects from you just the name of the assets and is smart enough to look in all possible asset placements and import whatever it can import (so the name should be format-independent)

Roaring Stones
  • 1,054
  • 7
  • 22