Geek asks and answers

Import SCSS files from the parent directory on Heroku Cedar

I am trying to deploy a Rails 3.1 application that I worked on locally. But after it was deployed to Heroku (Cedar stack), I ran into a problem that I didn’t have local access to and I can’t find a solution for this.

Actually, in some of my SCSS files, I import other SCSS files located in the parent directory. Among the several syntaxes I've tried:

 @import "file.css.scss";
 @import "file";
 @import "/file.css.scss";
 @import "/file";
 @import "../file.css.scss";
 @import "../file";

Most of them work locally, but none of them work on my CGG Heroku application. I also tried renaming my imported file to "_file.css.scss" with underlining, as this is the standard format for SCSS files that need to be imported. But nothing has changed.

The heroku error logs give me: ActionView::Template::Error (File to import not found or unreadable: /mixins.css.scss.

I am getting ideas now, so I will be grateful if you have any tips to solve this problem.

Thanks a lot, Greetings!

+3
source share
3 answers

The syntax should be

With the following folder structure

/app/
  /assets/
    /stylesheets/
      /pages/
       index.css.scss
       products.css.scss
      application.css.scss

If you want to include scss files in / pages / from application.css.scss, you will do the following:

@import "pages/index";
@import "pages/products";

You should also be able to do the following (however, I'm not sure if this is limited by the presence of Compass in the project or not).

@import "pages/*";

The ability to import globes is amazing. But I think it can only be Compass, or at least it was before.

0
source

If the file importing it in one folder should work:

@import './file.css.scss';

, . .. /, , .

0

Rails Asset Pipeline , .

app/assets/stylesheets application.css. Sprockets, css, app/assets/stylesheets.

:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/

*= require_self css, application.css, *= require_tree . , app/assets/stylesheets.

If you want to change the order of inclusion or specify a specific stylesheet, for example, a file with a name mixins.css.scsslocated in app/assets/stylesheets, here is how you do it:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
 *= require_mixins
*/

And the magic of stars will contain your file for you.

-1
source

More articles:


All Articles