Как использовать Sass во Vue 3?

Question

[postya]

Проект на Vue 3 c Typescript
Не могу подключить sass, файлы стилей не видны. Мне нужно,чтобы scss файлы были видны глобально

Что я пытался сделать:

1. Создал в корне проекта файл vue.config,js и доабвил в него

css: {
    loaderOptions: {
      sass: {
        additionalData: `
            @import "@/assets/scss/styles.scss";
            `
      }
    }
  }

2. Создал директорию scss в assets и создал там файлы
fonts.scss, global.sccs, styles/scss, variables.scss

3. В файле styles.scss импортировал все файлы scss

@import "global";
@import "variables";
@import "fonts";

Как нужно правильно использовать sass во Vue 3 проектах?

Answer 1

[Сергей delphinpro]

В additionalData импортируют переменные и миксины.
В styles.scss пишем стили, импортим другие файлы (переменные и миксины не требуется, но мешать не будет).
Сам styles.scss импортируем в клиентской точке входа (main.js по умолчанию, кажется, если без SSR).

Answer 2

[Swert]

тык

Comments

[postya]

я сделал тоже самое в файле vue.config.js