Rails - sprockets cannot recognize scss files

Question

I recently upgraded my Sprockets from 3.7.2 to 4.0.2 and since then my application.css file cannot recognize one of the files that has been written in scss:

 *= require editor/content-tools.scss
 *=/ require_tree .
 *=/ require_self
 */

(editor/content-tools.scss is located in vendor, not in app/assets).

While I try to execute it I receive this error:

ActionView::Template::Error (couldn't find file 'editor/content-tools.scss' with type 'text/css'

Sprockets is looking for a 'text/css' type file and if I rename my file to content-tools.css it stop producing errors, which eliminates possible problems related to path findings.

So my question is how can I tell sprockets to check look for files with.scss extensions in my application.css as it did before?

Answer 1

From sass-rails

Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native @import directive which sass-rails has customized to integrate with the conventions of your Rails projects.

So you could achieve that by:

1. Rename application.css to application.scss

2. Use import syntax instead of require :

// application.scss

@import "editor/content-tools.scss";

@import "*";