Можно ли отслеживать определение исходных стилей (sass, scss) в Vue при разработке?

Question

Я пытаюсь импортировать стили из внешних библиотек и все еще сохраняю исходную ссылку на оригинальное имя библиотеки.

В классическом HTML я бы создал от <style> до минимизированного css в index.html, но мне нужно внести изменения и поэтому я должен использовать исходный код этой библиотеки scss, то есть Bulma .

Мне это нужно, чтобы я мог продолжать использовать инструменты разработчика Chrome и видеть, откуда берутся стили проверяемого элемента, и изменять его в источнике или переопределять, если это необходимо.

Пример:

app.vue:

<style lang="scss">
  @import "styles/app.scss";
</style>

app.scss:

@charset "utf-8";

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Custom
@import "variables";

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

// Mixed overrides
@import "overrides";

При проверке элемента в инструменте разработчика Chrome я вижу, что его стили взяты из внедренных стилей vue, даже если они исходят из определений библиотеки. Например, пограничный радиус Navbar Bulma появляется в стилях, а не в каком-то «navbar.sass»:

В таком случае я точно знал, откуда взялся этот стиль, но мой рабочий процесс станет сложнее, когда я добавлю больше стилей CSS.

Как я могу использовать исходные файлы scss других библиотек и иметь ссылку на исходное местоположение стиля?

В конце концов, конечно, я хотел бы иметь один файл CSS для своего приложения.

(я использую vue-cli 3)

Answer 1

Использовать sourceMap: true в vue.config.js, как показано ниже,

module.exports = {
  css: {    
    sourceMap: true
  }
}

Я использую его, как показано ниже,

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/style.scss";`
      }
    },
    sourceMap: true
  }
}