Compiling Sass (scss) to css

Question

I have this template - web template - editorial when I added it to my existing Meteor app it does not load the scss files, only the css file which is in the client directory. Though I put the scss files in the public folder. What best way can I add this? because I could not get it to work i decided to compile the scss to css.

sass_folder
    scss_subfolder
        ----base_scss_subfoler
            _partial1.scss
            _partial2.scss
        ----components_scss_subfoler
            _buttons.scss
            _textbox.scss
        ----layouts_scss_subfoler
            _pages.scss
            _footer.scss
        ----libs_scss_subfoler
            _functions
            _vars
            _skels
            _mixins
    main.scss
    ie8.scss
    ie9.scss
    css_output_folder

I have tried to compile the files by doing thus on the cmd: sass --update scss:css it only compiled the main.scss, ie8.scss, ie9.scss to the css folder, other are not compiled. How do I compile all at once and maintain the same sub-directory folder in the css folder. Why and how do I do this?

The files starting with underscore are 'INCLUDED' and not compiled. You need to include these files to main.scss etc... — MJ Khan, Jul 25 '17 at 12:56
ok. Thanks. This means everything will be compiled into the main.css file, right? Sorry, didn't get the context of your contribution earlier. — ken4ward, Jul 25 '17 at 13:05

score 2 · Answer 1 · answered Jul 25 '17 at 17:04

2

If other files name start with _ character then these files are partials meaning they get no compiled and their content can only used with import.

Read the official doc about partials.

answered Jul 25 '17 at 17:04

Sqveeze

73
6

What does this answer add to the answer provided above !?!? – MJ Khan Jul 26 '17 at 03:38

score 1 · Accepted Answer · answered Jul 25 '17 at 12:59

The files with names starting with underscore are considered as partials and not compiled to css files. That is why you are not seeing those in your output css.

Please navigate to section with heading 'Partials' in this document ... and read the next 2 sections.

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. 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.

Compiling Sass (scss) to css

2 Answers2