Language-tools: 样式标签lang属性触发Svelte Beta的警告

这也发生在我身上，一旦我禁用了任何指向通过src="./xxx.scss"导入的样式语言的语言或明细，系统就会在页面开始时不再抱怨它。

由于它发生在scss上，因此我非常确定这是一个像这样的node-sass问题。

您可以在VSCode中打开Output-> Svelte（底部视图，也是您的终端所在的位置），重现错误并在此处粘贴输出是什么？

可能相关：＃32

即使在几次重新加载后，使用Node-sass在本地和全局上所做的任何事情都不会改变结果。

这是Svelte的输出（请注意，我有3.20.1，因为更新版本中的错误不允许我升级项目，也报告了）

loading config for /PATH/TO/PROJECT/src/Button.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/node_modules/@smui/common/H6.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
loading config for /PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler
Using Svelte v3.20.1 from /PATH/TO/PROJECT/node_modules/svelte/compiler

linting的SCSS可能是相关的，当我使用内联SCSS时，我也曾经有过类似的说法，但是作为一个旁注，这不是错误，而是警告，位于文件顶部。 不需要解析SCSS。

我相信与htmlxparser.ts相关

@dummdidumm我确实在发布此错误之前检查了该输出，并没有看到Svelte Beta报告任何错误。 今天，我将在可能的情况下重试并发布日志。

由于它发生在scss上，因此我非常确定这是一个像这样的node-sass问题。

我对此是否表示怀疑，但我将进行调查并查看发现的内容。

从@Egnus输出中，我可以推断出已找到svelte.config.js 。 如果未找到但需要该配置（由于在lang / type上设置了script / style ），则会显示一条No svelte.config.js found but one is needed消息将显示在日志中。
它也与svelte2tsx的htmlxparser没有关系，因为其中没有进行任何预处理。 尝试从svelte编译器获取诊断时，它在这里失败。

这是我检查Svelte输出时获得的日志（匿名路径；在VS Code中显示时为斜线）：

Initialize language server at c:/PATH/TO/PROJECT/
Initialize new ts service at  
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
loading config for c:/PATH/TO/PROJECT/src/App.svelte
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler

与@Egnus的VS Code输出几乎相同，除了Svelte版本和Initializing new ts service at 。 不知道这是不是很重要，但是消息之间的斜线交替对我来说很突出。

还仔细检查了node-sass是否与我的Windows和Node.js版本兼容。 node-sass v4.14.1（当前最新发行版）与我的节点版本v13.7兼容。

您能再检查一次吗？ 我在该区域进行了更多日志记录的更新，并稍微更新了面向用户的错误消息。

您是指上面的提交吗？ 如果是这样，我已经在合并提交之后进行了检查，并在检查之前安装了新更新。

该扩展名每晚发布一次，最后一次发布大约在8个小时前，因此您的日志可能在14个小时前使用“旧”版本。

啊，我明白了。 接下来，我将可以获取新日志。

我也将在几个小时或之前检查它

嗯，有趣的是，您是对的：

Preprocessing failed
Error: Cannot find any of modules: node-sass,sass
    at Object.exports.importAny (/PATH/TO/PROJECT/node_modules/svelte-preprocess/dist/utils.js:1:2844)

我将检查为什么svelte.config.js未使用它，然后返回

好了，似乎svelte-preprocess没有找到node-sass既不全局或局部VSCode。 而导入以下svelte.config.js的同一汇总配置却可以。

// svelte.config.js
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['x', 'y', 'z'],
    },
    typescript: {
      extensions: ['x', 'y', 'z'],
      includePaths: ['x', 'y', 'z'],
    },
  }),
  // ...other svelte options
};

// The following alternative should make SCSS to work but nothing else will. Why the auto preprocess does not work here?

// import sass from 'node-sass';
// module.exports = {
//   preprocess: {
//     style: async ({ content, attributes }) => {
//       if (attributes.type !== 'text/scss') {
//         return;
//       }

//       const result = await sass.renderSync({
//         data: content,
//         sourceMap: 'style.css.map',
//         omitSourceMapUrl: true,
//       });

//       return {
//         code: result.css.toString('utf8'),
//         map: result.map.toString('utf8'),
//       };
//     },
//   },
// };

可能是Svelte Beta的问题？ 除了自己编写预处理程序外，我现在还不知道如何告诉Node-sass到VSCode的路径。

我在master上得到了这个，我认为我的计算机上甚至都没有安装node-sass。 Typescript正在运行（!!!），只是出现了这个相当烦人的棉绒警告。

.
├── home.svelte
├── node_modules
│   ├── <strong i="6">@types</strong>
│   ├── detect-indent
│   ├── min-indent
│   ├── strip-indent
│   └── svelte-preprocess
├── package-lock.json
├── package.json
└── svelte.config.js

苗条的

<script lang="typescript">
  export let title: string = "10";
</script>

<style>
  h2 {
    background: blue;
  }
</style>

<html lang="en">
  <h2>{parseInt(title, 10)}</h2>
</html>

svelte.config.js

const sveltePreprocess = require('svelte-preprocess')

module.exports = {
  preprocess: sveltePreprocess(),
}

很乐意进一步测试以缩小范围。

我还要❤️删除svelte.config.js并添加一些常用配置。很高兴打开PR来实现这一目标。 编辑，我_think_ https://github.com/sveltejs/language-tools/pull/87使得这种情况发生了👏

mm我很好奇@matthewmueller ，在您的扩展程序中更新Svelte Beta并在此处复制VSCode中的Output-> Svelte（在底部查看，也位于您的终端所在的位置）。

啊哈！ 感谢您的指点！

好的，这表明我只是在玩耍，还没有在真实的应用程序上测试test

在事后看来，有两个隐式依赖关系很明显，但是警告使您误入歧途：

1. 错误：找不到模块“ svelte / package.json”
2. 错误：[预先预处理]转换“打字稿”时出错。 找不到模块“打字稿”

我认为为人们提供后备的Typescript和Svelte可以很快地玩耍，这很酷，这与VSCode与Typescript的工作方式类似。

关于将其烘焙：我也曾考虑过这一点，但我认为苗条的社区可能已经习惯于自定义预处理器。 如果我们将所有这些都包含在插件中，这将意味着添加和安装依赖项，例如node-sass，less，babel等。这会使插件膨胀。

回到具体问题，有两个问题：

1. 有时模块分辨率会变高。 为什么需要调查一些东西。 还值得注意的是，像yarn的pnp这样的设置不起作用。
2. node-sass对使用的节点版本非常敏感。 对我来说，将svelte beta设置中的运行时环境设置为我的节点可执行文件，这也足够了，其余的应用程序也使用该环境。 如果不这样做，将使用VSCode的节点版本，并且可能不匹配。

@dummdidumm，我很喜欢您的想法，但我个人认为Typescript已达到一定的知名度，值得一流的支持。 大多数新的代码库都以Typescript开头，而旧的代码库正在升级。 这阻止了很多人尝试Svelte： https ://news.ycombinator.com/item = 21376557

我本人会跳过一流的babel支持，然后看看有多少人抱怨–配置有太多可变性，它可以为支持蠕虫的人打开一罐蠕虫。

我也不认为有任何CSS解决方案获得了如此一致的支持。 另外，由于Svelte已经提供了范围广泛的CSS解决方案，因此我认为它不必像键入的javascript一样必要。

啊哈！ 感谢您的指点！

好的，这表明我只是在玩耍，还没有在真实的应用程序上测试test

在事后看来，有两个隐式依赖关系很明显，但是警告使您误入歧途：

1. Error: Cannot find module 'svelte/package.json'

2. Error: [svelte-preprocess] Error transforming 'typescript'. Cannot find module 'typescript'

我认为为人们提供后备的Typescript和Svelte可以很快地玩耍，这很酷，这与VSCode与Typescript的工作方式类似。

package.json很有意思，需要检查一下。 它应该回退到插件的内置苗条版本。 除此之外，该功能现在仅适用于打字稿。 您需要完全删除svelte.config.js。 然后使用一个后备版本，它应该能够处理打字稿，但不能更多。 由于当前该区域的波动太大，因此没有记录。

是的，这太神奇了！ 我删除了svelte.config.js并添加了svelte和typescript依赖性。 它就像一个魅力！

也感谢@egnus教了一个男人钓鱼。

是的，删除svelte.config.js为我解决了问题

@dummdidumm检查并获得与Egnus相同的错误报告：

Initialize language server at  c:/PATH/TO/PROJECT/
Initialize new ts service at  
Trying to load config for c:/PATH/TO/PROJECT/src/App.svelte
Found config at  c:\PATH\TO\PROJECT\svelte.config.js
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Using Svelte v3.22.3 from c:\PATH\TO\PROJECT\node_modules\svelte\compiler
Preprocessing failed
Error: Cannot find any of modules: node-sass,sass
    at Object.exports.importAny (c:\PATH\TO\PROJECT\node_modules\svelte-preprocess\dist\utils.js:1:2844)

我还尝试了删除svelte.config.js文件，但是它不适用于我的情况。 从我对讨论的了解来看，这似乎仅用于修复仅使用打字稿预处理器的情况。

这引起的问题是，Svelte是否正在将node-sass或sass放在系统路径中，而不是在node_modules ？ 虽然我在本地为该项目安装了node-sass ，但我没有在全球安装它。

找不到软件包时，可能会出现“无法找到任何模块：...”错误，这是因为找不到模块分辨率，或者是因为找到了该模块，但是节点版本不匹配，然后节点-sass抛出了一个错误。 svelte-preprocess吞噬了这两个错误，并仅发出“找不到任何模块：...”

我尝试了这一点，可以通过设置svelte.language-server.runtime来解决我遇到的问题，例如@dummdidumm建议。
@JoeBobMiles您可以尝试在js文件中要求node-sass并使用node运行该文件以查看是否存在任何错误。

const nodeSass = require('node-sass')

console.log(nodeSass)

@JoeBobMiles在这一堆测试中，我不仅删除了svelte.config.js ，还安装了sass作为DevDependency（我只有node-sass），并在全局安装了node-sass。

之前，我已经完成了此工作，但是没有成功，但是当我删除JS文件时，Svelte Beta起作用了，但是我真的不知道我对其他哪些细节有所影响，并且目前无法对其进行测试。
让我们知道这些额外的更改是否可以解决问题。 另外，每次尝试都重新启动Language-tools和vscode窗口。

@ jasonlyu123感谢您的建议。 使用您的代码段，我没有收到任何错误，因此我认为node-sass确实有效。 （尽管我只是意识到键入此内容是因为Webpack编译时没有问题，所以该检查可能是多余的。）

但是，看来node-sass是问题所在。 安装sass （并且仅安装sass ）后，Svelte Beta停止报告警告。 我从项目中删除了node-sass ，但警告没有再出现。 似乎Svelte Beta只是在寻找sass而不是sass或node-sass 。

此外，我尝试将lang值从scss更改sass并注意到棉绒的一些有趣行为。 尽管Svelte Beta不再抱怨，但VS Code的CSS linter似乎不喜欢在样式标签中看到基于缩进的Sass语法：

尽管我认为这更多的是VS Code问题，而不是Svelte Beta问题。

不幸的是，到目前为止，尚不支持SASS。 我们使用https://github.com/microsoft/vscode-css-languageservice/tree/master/src进行linting等，并且该库不支持SASS。

尽管通过变通办法可以解决您的错误，但我仍然希望将此问题保留下来，以防其他人遇到此问题，并深入了解此问题。

关于这个问题的一点反馈。 我遇到了同样的问题，并通过设置"svelte.language-server.runtime": "/<LOCAL_PATH>/bin/node" 。

我认为这是由于vscode扩展Code Helper (Renderer)中的默认节点运行时是电子定制的，很难解决像node-sass这样的本地lib。

ps aux输出：

/Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper (Renderer).app/Contents/MacOS/Code Helper (Renderer) --inspect=6009 /Users/username/.vscode/extensions/svelte.svelte-vscode-99.0.39/node_modules/svelte-language-server/bin/server.js --node-ipc --clientProcessId=72991

需要将此文件记录在某处。 或者更好，默认情况下，尝试在扩展内像exec('/usr/bin/env which node')那样为用户找到普通的节点二进制文件（虽然不确定如何在Windows上执行相同的操作）。

它已记录在

警告在即将发布的产品发布中会更好，可以在每晚进行测试。 我希望这将在将来缩小问题范围。 由于此问题已经并行进行了很多事情，而大多数问题（如果不是每个问题）都可以得到解决，因此我将结束本问题。 如果发生与SCSS相关的问题，请打开一个新的问题。