Как использовать SASS миксины и переменные во всех компонентах Vue?

Question

[devilsD]

Если я подключаю в компонент глобальные стили:

<style lang="scss">
@import "./sass/main.scss";
.bs-navbar-nav{
    background-color: $bg_color; /*переменная из main.scss */
}
</style>

В таком случае могу использовать переменную $bg_color или миксины из импортируемого файла, но использовать переменную в другом компоненте без повторного импорта не получается . Возможно ли подключить глобально main.scss, чтоб переменные были доступны в любом компоненте?

Answer 1

[Evgeny Kulakov]

Это можно сделать через webpack и плагин sass-resource-loader. Передать в него файл с переменными, в итоге они будут доступны везде.

Comments

[devilsD]

подключил в конфиге вебпака данный файл, его еще нужно где-то указать, т.к стили не работают?

{
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              // Provide path to the file with resources
              resources: './src/sass/main.scss'
   
            },
          },
        ],
      },

[Evgeny Kulakov]

devilsD, по идее должно заработать, может файл не видит по этому пути.. Попробуйте так: resources: path.resolve('./src/sass/main.scss')

[Никита Егоров]

devilsD, но ведь в sass-loader есть встроенная опция для этого, зачем другие плагины....

[devilsD]

svupol, И по Вашему совету настраивал конфиг через sass-loadr - принцип там тако же. Но почему то не работает ни один вариант, пока подключаю в каждый компонент..

[Никита Егоров]

devilsD,

{
    loader: 'sass-loader',
    options: {
          indentedSyntax: true,
          data: `@import "vars.scss";`
    }
}