Visual Studio Code 无法识别 Svelte 中的 SCSS答案

【问题标题】：SCSS in Svelte not recognized by Visual Studio CodeVisual Studio Code 无法识别 Svelte 中的 SCSS
【发布时间】：2020-05-03 20:21:39
【问题描述】：

VSCode 无法识别我包含在 svelte 文件中的 scss。它认为它们是 css 样式，并且它遇到的第一个嵌套 css 给了我错误。我试图通过禁用设置中的css验证，但它似乎没有任何效果：“css.validate”：false，苗条的应用程序可以正常工作，可以在本地启动它，也可以通过编译捆绑包进行生产（这不是我的代码的问题）。这只是 VSCode 如何控制我的样式的问题。对于这个问题，我的大多数苗条组件看起来都是错误的，即使它们不是真的。要编译像 scss 这样的样式，我将属性 type="text/scss" 包含到标签中：

<style type="text/scss">

所有错误都有代码：“css-syntax-error”。我认为原因是因为 VS Code 无法识别它是 SCSS 而不是 CSS。

我在 svelte 中有这些 sass 扩展：

SCSS 智能感知
美化css/scss/sass/less
实时 SASS 编译器
Svelte 插件 0.9.3

我的 VSCode 设置：

{
  "svelte.language-server.runtime": "......",
  "scss.lint.important": "warning",
  "editor.formatOnPaste": true,
  "css.completion.triggerPropertyValueCompletion": false,
  "css.completion.completePropertyWithSemicolon": false,
  "css.lint.argumentsInColorFunction": "ignore",
  "css.lint.hexColorLength": "ignore",
  "css.lint.duplicateProperties": "warning",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "workbench.colorTheme": "Material Theme Darker",
  "css.validate": false,
  "editor.codeActionsOnSave": {},
  "git.enableSmartCommit": true,
  "css.fileExtensions": [
    "css",
    "scss"
  ],
  "beautify.options": {

  },
}

【问题讨论】：

使用哪个 Svelte 插件？ “Svelte”还是“Svelte Beta”？我建议使用后者，因为它将成为官方的 Svelte 插件。另外，错误到底是什么意思（如果您将鼠标悬停在它上面；包括消息右侧的灰色错误源）？一般说明：不支持 SASS，仅支持 SCSS。
感谢您的评论。我用更多信息编辑了我的问题。我使用 James Birtles 的 0.9.3 版本的插件（我在上面包含了截图）。它是正确的版本吗？我在所有具有 SCSS 样式的苗条组件中都有这些错误，但仅限于第一个 SCSS 代码片段。错误代码对所有人都是一样的：css-syntax-error（就像 VS Code 不能像 scss 那样识别它）。我没有使用 SASS。

标签： visual-studio-code svelte

【解决方案1】：

从错误看来，您的 svelte 文件的预处理失败了。您需要在项目的根目录中使用 svelte.config.js。插件使用它来预处理文件。

如果您将这个预处理器插件用于 svelte https://github.com/kaisermann/svelte-preprocess ，设置它就像这样简单：

svelte.config.js：

const sveltePreprocess = require("svelte-preprocess");

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

【讨论】：

谢谢。一个起来！