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, Apr 21 '16 at 22:48
i think what you are looking for should be accomplished by just adding `@import "custom"` to application.css.scss — Alfie, Apr 21 '16 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, Apr 21 '16 at 22:54

SnowJambi · Accepted Answer · 2016-04-21T23:24:34.970

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 '16 at 23:24

answered Apr 21 '16 at 23:13

SnowJambi

36
4

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 – KhoaVo Apr 22 '16 at 00:18
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. – SnowJambi Apr 22 '16 at 00:32
2

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 – KhoaVo Apr 22 '16 at 00:36
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! – SnowJambi Apr 22 '16 at 00:40

creating custom scss file

1 Answers1