How to import .SCSS files after uploading them to the theme???

I have uploaded a file "global.scss" to my theme. In "theme.scss" I've tried to import it using the following:

@import '/srv/nbuild/releases/20130729212540/public/stylesheets/scss/global.scss';

and

@import 'global.scss';

and even:

@import '{{ theme['global.scss'] }}';

None of those work. It throws an error and I cannot save the theme.scss.

How do I include other .SCSS files from the the main "theme.scss"?? This should be clearly documented.

Thank you

Official response from Jesse Haff

You can @import SCSS or CSS files by adding an underscore to the beginning of the scss/css filename, and leaving the underscore and file extension off when importing it into your stylesheet.

For example:

Name your stylesheet something like: _stylesheet.scss.

Then in theme.scss, reference it like this:

@import “stylesheet”;

Share this post

Showing 12 reactions

How would you tag this suggestion?

Add comment (optional)

Sign in with

Facebook Twitter

Jesse Haff

NationBuilder employee

Jesse Haff responded with completed

posted 2016-06-22 09:32:02 -0700
Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
That’s awesome, Jesse. Thank you.
posted 2014-01-07 11:48:45 -0800
Patrick Steil

Patrick Steil commented
Thanks Jesse!
posted 2014-01-07 11:14:20 -0800
Jesse Haff

NationBuilder employee

Jesse Haff commented
Please see the new official response above.
posted 2014-01-07 11:14:13 -0800
Patrick Steil

Patrick Steil commented
Great thanks Jesse!
posted 2014-01-02 17:01:19 -0800
Jesse Haff

NationBuilder employee

Jesse Haff commented
Patrick – You’re right, @import is not working properly at the moment with custom files. I will report it as a bug. Until it’s resolved, you can paste the contents of the stylesheet directly into your theme.scss file.
posted 2014-01-02 16:19:59 -0800
Patrick Steil

Patrick Steil commented
I am getting the same results as Jesse R. here… I try to import my own scss file using @import “galilee_color_red” and I get a similar error:

Content scss File to import not found or unreadable: galilee_color_red. Load paths: /srv/nbuild/releases/20140102204624/public/stylesheets/scss /srv/nbuild/shared/bundle/ruby/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets /srv/nbuild/shared/bundle/ruby/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets /srv/nbuild/shared/bundle/ruby/1.9.1/gems/fancy-buttons-1.2.0/lib/stylesheets /srv/nbuild/releases/20140102204624/app/assets/stylesheets/admin /srv/nbuild/releases/20140102204624/app/assets/stylesheets/mixins Compass::SpriteImporter #

Any update on what Jesse’s problem was? Thanks!
posted 2014-01-02 13:44:26 -0800
Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
Jesse — At this point, I think the best bet is for us to troubleshoot with you more directly. Can you shoot an email to [email protected] so we can take a look directly at what you’re working with?
posted 2013-07-30 13:20:39 -0700
Jesse Rosenfield

Jesse Rosenfield commented
When I do that, I get the following:

Content scss File to import not found or unreadable: fontawesome. Load paths: /srv/nbuild/releases/20130729212540/public/stylesheets/scss /srv/nbuild/shared/bundle/ruby/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets /srv/nbuild/shared/bundle/ruby/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets /srv/nbuild/shared/bundle/ruby/1.9.1/gems/fancy-buttons-1.2.0/lib/stylesheets /srv/nbuild/releases/20130729212540/app/assets/stylesheets/admin /srv/nbuild/releases/20130729212540/app/assets/stylesheets/mixins Compass::SpriteImporter #
posted 2013-07-30 11:58:07 -0700
Jesse Rosenfield

Jesse Rosenfield responded

posted 2013-07-30 11:55:29 -0700
Jesse Rosenfield

Jesse Rosenfield tagged this with Advanced

posted 2013-07-29 16:22:54 -0700
Jesse Rosenfield

Jesse Rosenfield tagged this with Important

posted 2013-07-29 16:22:54 -0700