creating custom scss file

Question

I'm install bootstrap gem and follow all direction to change application.css, however when I create another custom .scss file, customizations from the custom file werent included in application.css.scss . I have tried to import boot strap and bootstrap-sprockets to the custom file as well, but no changes were made on the website. How can I make the customizations on the newly created custom.scss file to show on the website.

the application.css.scss file contains only 2 lines

@import "bootstrap-sprockets";
@import "bootstrap";

So, is your requirement to add custom.scss to application.css ? could you make the requirement clearer please — Alfie
– Alfie, Commented Apr 21, 2016 at 22:48
i think what you are looking for should be accomplished by just adding @import "custom" to application.css.scss — Alfie
– Alfie, Commented Apr 21, 2016 at 22:49
I did that as well, but i still see no changes to the website, If I put the customization directly to the application.scss file, then it works — KhoaVo
– KhoaVo, Commented Apr 21, 2016 at 22:54

SnowJambi · Accepted Answer · 2016-04-21 23:24:34Z

2

If I've read your question correctly, you have application.scss, which contains

@import "bootstrap-sprockets";
@import "bootstrap";

and also your custom.scss file, contents of which you want to end up in application.css. You need to add it to your application.scss file, ie -

@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";

It's also recommended to begin the name of .scss files which you are importing (also known as partials) with an underscore, so in this case custom.scss becomes _custom.scss.

And make sure you recompile the application.scss to application.css so the changes are actually made - I'm not sure what you're using to compile your sass but I think this may be the step you are missing.

edited Apr 21, 2016 at 23:24

answered Apr 21, 2016 at 23:13

SnowJambi

364 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KhoaVo Over a year ago

basically, this is what i originally have which doesn't do anything for me for some reason, I renamed both file file with .css.scss extensions so that should already take care of the recompiling problem

SnowJambi Over a year ago

So with the above structure, if you modify custom.scss, then compile application.scss, is what you wrote in custom.scss then visible in the output application.css file? Trying to figure out at which point things are going wrong here.

KhoaVo Over a year ago

oh I figured out what went wrong, I needed to put the @import "custom"; line above the other 2 imports lines for the changes to take effect

SnowJambi Over a year ago

Oh ok, interesting. You'd think having it last would ensure the changes would be made, but I guess SASS doesn't roll that way, will have to read up on that!

Collectives™ on Stack Overflow

creating custom scss file

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related