分离 SCSS 和 CSS 文件

Posted 2023-03-06

【中文标题】分离 SCSS 和 CSS 文件

【英文标题】：Separating SCSS and CSS files

【发布时间】：2021-09-25 12:22:49

【问题描述】：

这是我的网站文件夹结构：

/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

说明：

我有一个root 文件夹，包含index.html 和几个文件夹，例如fonts、js、styles... 在styles 文件夹中，有两个文件夹scss 和css。在scss 文件夹中，有main.scss（其中包含所有scss -imported-），以及一些带有scss 文件的文件夹，例如：base、utilities、pages...

问题：

当我创建scss 文件时，compiler 在已创建的scss 文件的same 文件夹中创建css 和css.map。 例如，在创建 variables.scss 之后，它会如下所示：

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

问题：

如何将不同文件夹中的两种类型的文件分开，使其看起来与下面的示例完全相同？

我想要实现的目标：

/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

【问题讨论】：

这真的取决于你的 Sass 编译器。查看这个 GitHub 线程 here 获取 VSCode LiveSassCompiler

另外，对于仅包含的 .scss 文档，请考虑在文件名前添加下划线，以防止它被自己编译，而不是作为主要 .css 文档的一部分。 （_variables.scss 而不是variables.scss）。查看this thread 了解更多信息。

【参考方案1】：

您需要将不想生成 CSS 的文件重命名为在名称前添加下划线 "_"。不用担心您不需要更改导入中的名称，SASS 会为您完成。

所以你的变量文件是_variables.scss

【讨论】：

我知道，添加“_”下划线不会生成新文件，但我需要将 CSS 文件保存在新文件夹中，如上例所示。 （Sass 相同，但在 CSS 文件夹中）

对不起，我误解了这个问题。在这种情况下取​​决于编译器，节点 Gulp 和 Ruby 是默认行为，您使用的是哪个编译器？

【参考方案2】：

我建议使用 live sass 编译器来转译 scss 文件 尝试这个： 去

menu- file>preferences>settings>extension>live sass copile config>在 settings.json 中编辑

并粘贴： （可以自定义保存路径）

"liveSassCompile.settings.formats": [

  "format": "expanded",
  "extensionName": ".css",
  "savePath": "./css/"

]