Visual Studio 代码无法识别 Svelte 中的 SCSS

Question

VSCode 无法识别我包含在 svelte 文件中的 scss。它认为它们是 css 样式，并且它遇到的第一个嵌套 css 给我错误。我试图通过禁用设置中的 css 的验证，但它似乎没有任何效果： "css.validate": false, svelte 应用程序可以正常工作，无论是在本地启动它还是编译生产包（这不是我的代码的问题）。这只是 VSCode 如何控制我的样式的问题。对于这个问题，我的大多数 svelte 组件看起来都是错误的，即使它们不是真的。要编译像 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": {

  },
}

Answer 1

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

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

svelte.config.js:

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

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

Visual Studio 代码无法识别 Svelte 中的 SCSS

SCSS in Svelte not recognized by Visual Studio Code

visual-studio-code

svelte