2

I'm using Rails 4.2.

In my rails project directory, I have a frontend directory:

/railsproject/frontend
/railsproject/frontend/styles
/railsproject/frontend/styles/main.scss
/railsproject/frontend/styles/variables.scss
/railsproject/frontend/node_modules/normalize.css/
/railsproject/frontend/node_modules/normalize.css/normalize.css

(I know it's unusual to have a directory with a period in it, but I have tried changing the directory name and corresponding @import statement and it didn't make a difference)

I have added config.assets.paths << Rails.root.join("frontend","styles") to application.rb.

In /railsproject/app/assets/stylesheets/application.css:

@import "main.scss";

Everything is good so far, it loads/processes the main.scss file.

In /railsproject/frontend/styles/main.scss

@import 'variables'; // this works fine
@import '../node_modules/normalize.css/normalize.css'; // this does NOT work

The second import doesn't work...I get a GET error in the Chrome console, and the rails server says:

Started GET "/node_modules/normalize.css/normalize.css" for ::1 at 2015-07-02 15:55:38 +0800

ActionController::RoutingError (No route matches [GET] "/node_modules/normalize.css/normalize.css"):

What am I doing wrong?

Akshay
  • 790
  • 2
  • 8
  • 22
Ben Smith
  • 851
  • 2
  • 10
  • 22
  • Change your import line to: `@import '../node_modules/normalize.css';` ? – fkoessler Jul 02 '15 at 08:02
  • Sorry normalize.css is a directory... a file `/railsproject/frontend/node_modules/normalize.css/normalize.css` exists. I have tried removing the period in the directory name and @import but it doesn't help. – Ben Smith Jul 02 '15 at 08:04
  • Can you try removing the .css extension from the normalize.css file? – fkoessler Jul 02 '15 at 08:06
  • That worked! Is there any way to get rails to be ok with the .css extension? As that's how the node package is distributed... – Ben Smith Jul 02 '15 at 08:10
  • Check this: http://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file :) It's supposed to work from SASS 3.2.10 – fkoessler Jul 02 '15 at 08:17

1 Answers1

-1

SASS is not letting you import CSS files, it wants SCSS files to compile into CSS. Either switch your file extension to SCSS or upgrade to SASS 3.2.10 which is supposed to let you import CSS files.

Reference: Import regular CSS file in SCSS file?

Community
  • 1
  • 1
fkoessler
  • 6,932
  • 11
  • 60
  • 92
  • 1
    To get this to work: you can use `normalize.css` as the filename but NOT as the @import, that has to be without extension (`../etc/normalize`). Perhaps this is useful for someone else with this problem – Ben Smith Jul 02 '15 at 11:43
  • If a question is answered by another question, the question should be closed as a duplicate. Also, there is currently no Sass version that will import CSS files. – cimmanon Jul 02 '15 at 13:00