如何在中启用 SCSS 突出显示和智能感知<style> tag?

Question

我有一个包含 3 个标签的 Web 组件。 <template> 、 <style>和<script> 。 文件的扩展名是.html 。 模板和脚本标签中的突出显示和格式设置按预期工作。 如果我在其中编写纯 CSS，样式标签也没有问题。

<template>
  <p>
    Hello {{data.name}}!
    <a href="#">This is invisible</a>
  </p>
</template>

<style lang="scss">
  p {
    color: red;
    a {
      display: none;
    }
  }
</style>

<script>
  class {
    data = {
      name: "fehmi",
    };
  }
</script>

我知道 Vs 代码内置了 scss 扩展。

但它仅在文件扩展名是.scss时才有效。 我怎样才能让它在<style>标签中工作？ 我想使用嵌套规则和条件逻辑而不会出现语法错误和失去智能感知。

Answer 1

我用过这个插件。 您需要做的就是将lang="scss"到样式标签。

https://marketplace.visualstudio.com/items?itemName=sissel.scss-style-tag

我知道这几乎是一个仅链接的答案，所以如果您需要帮助配置它，请告诉我。

Answer 2

将语言模式配置为“vue”（或“svelte”，这两种模式都支持 , 和 ）似乎解决了问题。 您可以为 web-component 的格式配置文件关联。