分离 SCSS 和 CSS 文件

Question

This is my website folder structure:

/images
/fonts
/js
/styles /    
        scss/
            |
            |– utilities/
            |   |– variables.scss  
            |
            |– base/
            |   |– reset.scss       
            |   |– typo.scss        
            |
            |– pages/
            |   |– index.scss       
            |   |– page1.scss            
            |
            – main.scss            

        css/ 
            // Save CSS Here

index.html

Description:

I have a root folder, contains index.html and few folders, like fonts , js , styles ... In the styles folder, there's two folder, scss and css . and in the scss folder, there's main.scss (which contains all the scss -imported-), and few folders with scss files, like: base , utilities , pages ...

The Problem:

When I create a scss files the compiler creates the css and css.map in the same folder of the scss file that been created. For example, after creating variables.scss it'll look like this:

|– utilities/
            |   |– variables.css   
            |   |– variables.css.map   
            |   |– variables.scss   

The Question:

How can I separate the two types of files in different folders to look exactly like the example below?

What I'm Trying To Achieve:

/images
/fonts
/js
/styles /    
        scss/
            |
            |– utilities/
            |   |– variables.scss  
            |
            |– base/
            |   |– reset.scss       
            |   |– typo.scss        
            |
            |– pages/
            |   |– index.scss       
            |   |– page1.scss            
            |
            – main.scss            

        css/ 
            |
            |– utilities/
            |   |– variables.css
            |
            |– base/
            |   |– reset.css
            |   |– typo.scss
            |
            |– pages/
            |   |– index.css
            |   |– page1.css
            |
            – main.css

index.html

Answer 1

i suggest using live sass compiler for transpiling scss files for trying this : go to

menu- file>preferences>settings>extension>live sass copile config>edit in settings.json

and paste this: (your save path can be customized)

"liveSassCompile.settings.formats": [
{
  "format": "expanded",
  "extensionName": ".css",
  "savePath": "./css/"
}

]

Answer 2

You need to rename the files you don't want to generate a CSS to have a underscore "_" before the name. And don't worry you don't need to change the name in the imports, SASS do that to you.

So your variables file would be _variables.scss