Использование переменных sass в компоненте VueJS

Импорт _variables.scss в каждый компонент кажется единственным решением, которое я нашел до сих пор (он должен работают, по этому вопросу).

<template>
    <div class="my-color"></div>
</template>
<style lang="sass">
    @import 'path/to/your/_variable.scss'; // Using this should get you the variables
    .my-color {
        color: $primary-color;
    }
</style>
<script>
    export default{
        data(){
            return {}
        }
    }
</script>

Поскольку вы собираетесь включать только переменные, это не должно быть проблемой.

Но, как упоминалось в проблеме, небольшое предостережение: вы должны включать только абстрактные сущности (переменные, расширения, миксины) в каждый компонент, а не конкретные правила CSS.

Предполагая, что вы используете vue-cli, попробуйте это.

Если у вас еще не установлен загрузчик sass:

npm install -D sass-loader node-sass

Затем в vue.config.js:

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/pathto/variables.scss";`
      }
    }
  }
};

В вашем компоненте:

<style lang="sass">
    .my-color {
        color: $primary-color;
    }
</style>

Источник:

• Передача параметров загрузчикам препроцессора

• Как для импорта файла sass в каждый компонент vue

Изменить:

Начиная с sass-loader 8, data должен быть prependData (спасибо @ ben-y за указание на это):

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/pathto/variables.scss";`
      }
    }
  }
};

Я использую последнюю версию (v9.0.2 ) sass-loader, а prependData сейчас не вариант. Возможно, вы захотите попробовать эту конфигурацию в vue-config.js. Обратите внимание, что используется опция additionalData, поскольку опции prependData больше нет.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/pathto/variables.scss";'
      }
    }
  }
}

Для меня ни одно из вышеперечисленных решений не сработало (sass-loader 9.0.3), но это сработало:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          prependData: `@import "@/scss/variables.scss";`
        }
      },
    },
  },
};

Для своего проекта я использовал Vue CLI webpack, и вот решение, которое сработало для меня.

Я управляю всеми своими SCSS в файле App.vue. В каждом своем Component.vue я перестал использовать <style></style> и начал создавать отдельный component.scss.

Итак, моя папка src выглядит так:

 /src
     /assets
     /components
         /compA
             CompA.vue
             compA.scss
         /compB
             CompB.vue
             compB.scss
    App.vue
    main.js

И мой App.vue выглядит как

<template> ... </template>

<script> ... </script>

<style lang="less">
    //Bootstrap
    @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

    //Components
    @import "components/compA.scss";
    @import "components/compB.scss";
</style>

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

Примечание.

Это еще один вариант использования переменных SASS во Vue.

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