visual-studio-code - Visual Studio Code 无法识别 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(),
};