Как включить выделение SCSS и intellisense в теге ?

#html #css #visual-studio-code #sass

#HTML #css #visual-studio-code #sass

Вопрос:

У меня есть веб-компонент, который содержит 3 тега. <template> , <style> и <script> . Расширение файла .html . Выделение и форматирование в тегах шаблонов и сценариев работают должным образом. Также тег style не имеет проблем, если я напишу в нем чистый 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 code имеет встроенное расширение scss.

Но это работает, только если расширение файла .scss . Как я могу заставить его работать в <style> теге? Я хочу использовать вложенные правила и логику условий без получения синтаксических ошибок и потери intellisense.

1. Вы используете фреймворк?

2. Нет. Я пытаюсь использовать его с собственными веб-компонентами.

3. Я думаю, вам придется изменить всю конфигурацию в settings.json для каждого css, чтобы он действовал как форматирование scss

4. Но этот файл не является файлом CSS. Это HTML-файл, содержащий <style> в себе тег. Насколько я знаю, мы можем назначать расширения файлов языкам только через settings.json

Ответ №1:

Я использовал этот плагин. Все, что вам нужно будет сделать, это добавить is lang="scss" в тег style .

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

Я знаю, что это в значительной степени ответ только для ссылок, поэтому дайте мне знать, если вам нужна помощь в его настройке.

Ответ №2:

Настройка языкового режима на «vue» (или «svelte», оба этих режима поддерживают, и ), похоже, решает проблему. Вы можете настроить ассоциацию файлов для формата веб-компонента.