Search code examples
csstemplatesmeteorsassscss-lint

Compiling Sass (scss) to css


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?


Solution

  • 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.