0

I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.

How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.

I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?

3
  • Partials should not generate any CSS files. How are you naming them?
    – Arkellys
    Aug 19, 2019 at 11:26
  • just their responsible sections/functions like schedule_edit.scss, site_wide.scss, register.scss .... etc
    – STVN
    Aug 19, 2019 at 13:12
  • Alright thanks for the hint I found it in the documentation. They should all have an underscore prefix.
    – STVN
    Aug 19, 2019 at 13:16

2 Answers 2

5

https://sass-lang.com/guide

A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive. (@import is soon to be deprecated, with a move to @use and @forward instead. https://sass-lang.com/documentation/at-rules/import)

Thanks Arkellys.

1
  • I'm glad I helped. :) You should accept your answer as it might help others people.
    – Arkellys
    Aug 20, 2019 at 6:37
0

Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example. Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be @import 'header'; Notice that we do not import the underscore... If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.