实时SASS编译器创建额外的文件？

Question

我目前正在尝试学习如何在网络开发项目中实现SASS，但是我正在努力弄清楚如何将我的 .scss 文件正确编译到一个单个 .css中文件。

当我在终端中运行 sass -version 时，我将接收 1.53.0用dart2js 2.17.3 收集。就扩展而言，我使用的是Glenn Marks的Live Sass编译器，在 settings.json 文件中，我的配置看起来像这样：

{
  "liveSassCompile.settings.formats":[
     {
         "format": "expanded",
         "extensionName": ".css",
         "savePath": "/css"
     },
 ],
 "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
 ],
 "liveSassCompile.settings.generateMap": true,
 "liveSassCompile.settings.autoprefix": [
     "defaults"
 ]
}

这是我当前的项目目录： 当前项目目录结构

我当前的问题是，每当我单击观看 ，我要输出的唯一文件是 main.css 和 main.css.map ，但它创建了 index.css 和<代码> index.css.map 文件。

我正在尝试实现类似于 7-1 SASS架构的内容，并且在每个文件夹中，我创建了一个 index.scs.scss ，该文件将包含每个文件目录，然后将是 @forward 到 main.scss 。

有什么特殊的方法可以避免创建的额外文件？我不太熟悉 npm ，但我听说要学习它以利用SASS而不是使用VS代码扩展，这将是更有益的如果事实证明这种方法更有效，则该方法并将整个扩展程序取消。

感谢您在Advanced方面的帮助，希望我提供足够的信息！

Answer 1

如果您决定坚持使用我的扩展程序，则可以指定一个文件以输出/观看 livesasscompile.settings.includeitems 设置 - 如下所示

{
    "liveSassCompile.settings.includeItems": [ "/path/to/main.scss" ]
}

，也可能显示出更好的解决方案，并且可以使用一个更好的解决方案，您可以在负面的范围 将所有其他文件视为部分文件。然后，当保存任何SASS文件时，它将触发您的 main.scss.scss 文件的汇编

。这是！（）是负球模式，这意味着如果内部的模式匹配，则忽略它。

您可以在

• 粘贴到主字段中的Glog模式
• 单击编辑文件，然后将下面的文件粘贴到字段中，

/myapp/main.scss
/myapp/partials/file1.scss
/myapp/other.scss

• 请单击“应用”，并且应进行更新，并且除了主文件以外的所有内容都应为蓝色

Answer 2

Dart Sass配备了一个内置的编译器
只需运行代码

sass -watch sass/main.scss css/main.css

Answer 3

这一条故障可能是您问题的原因。
更改此：

 "liveSassCompile.settings.generateMap": true,

对此：

 "liveSassCompile.settings.generateMap": false,

Answer 4

我只是在这里离开这里，如果有人澄清了@USE和@forward规则的7-1模式在2024年10月的@Import标记为弃用之后。

回答原始问题：

索引scss被编译为单独的CSS文件的唯一原因是命名。如果使用基于文件夹的结构，则每个文件夹都可以具有“聚合”文件类型，其唯一的责任是收集当前文件夹中的所有文件并将其转发。
在根文件夹中，主文件应编译为CSS，因此该文件没有下划线，而其他文件则没有。

因此，只需在您的文件名之前放置一个下划线，为_index.scss。到目前为止，这仍然是部分文件，但是一个特殊的部分文件。
官方文档调用这些文件索引文件：
https：//sass-lang.com/documentation/at-rang.com/at-rang.at-rules /use/＃index-files

但是，关于7-1模式没有任何解释，因为这只是组织您的SCSS的偏爱。
为此，我发现的最好来源是此仓库（ https：//github.com/kittygiraudel/kittygiraudel/sass-boilerererplate- ）作者：Kitty Giraudel。

值得一提的是，她和Miriam Suzanne写的一本书详细介绍了使用Sass。如果您愿意。
https://www.miriamsuzanne.com/books/books/books/jumpstartsass/

编译器Glen在他的YT频道上有广泛的指南。