npm Live SASS编译器是否创建额外的文件？

7ajki6be 于 2023-10-19 发布在其他

关注(0)|答案(3)|浏览(140)

我目前正在尝试学习如何在我的Web开发项目中实现SASS，但我正在努力弄清楚如何正确地将我的.scss文件编译成一个单一的.css文件。
当我在终端中运行sass --version时，我收到1.53.0 compiled with 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"
 ]
}

这是我目前的项目目录：Current Project Directory Structure
我目前的问题是，每当我单击Watch Sass时，我希望输出的唯一文件是main.css和main.css.map，但它也创建了index.css和index.css.map文件。
我正在尝试实现类似于 *7 - 1 SASS架构 * 的东西，在每个文件夹中，我创建了一个index.scss，它将包含其目录中的每个文件，然后将@forward转换为main.scss。
有什么特别的方法可以避免创建额外的文件吗？我不太熟悉npm，但我听说为了利用SASS而不是使用VS Code扩展，学习它会更有益，如果它被证明更有效，我更愿意采取这种方法并将整个扩展作为一个整体废弃。
谢谢你的帮助，希望我提供足够的信息！

npm

来源：https://stackoverflow.com/questions/72775170/live-sass-compiler-creating-extra-files

3条答案

按热度按时间

izkcnapc1#

Dart sass自带内置编译器只需运行代码
sass --watch sass/main.scss css/main.css

赞(0）回复(0）举报 2023-10-19

avwztpqn2#

如果你决定坚持使用我的扩展名，那么你可以指定一个单独的文件输出/观看liveSassCompile.settings.includeItems设置-如下所示

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

或者，也可能是一个更好的解决方案，您可以在liveSassCompile.settings.partialsList中使用负glob表达式，将每隔一个文件视为分部。然后，当保存任何SASS文件时，它只会触发main.scss文件的编译
例如**/!(main).scss。!()是负的glob模式，这意味着如果里面的模式匹配，则忽略它。
你可以在https://globster.xyz/上看到它的动作。只需使用下面的设置

将上面的glob模式粘贴到主字段中
单击编辑文件并将下面的粘贴到该字段中

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

单击应用，它应该被更新，除了主文件之外的所有内容都应该是蓝色的

赞(0）回复(0）举报 2023-10-19

mbyulnm03#

这一条有故障的线路可能是你的问题的原因。更改此选项：

"liveSassCompile.settings.generateMap": true,

这是：

"liveSassCompile.settings.generateMap": false,

赞(0）回复(0）举报 2023-10-19

我来回答

npm Live SASS编译器是否创建额外的文件？

3条答案

相关问题

热门标签

最新问答