Как использовать переменную, объявленную в файле s css, в функциях файла. vue?

Question

Я настроил sass по этой ссылке https://cli.vuejs.org/guide/css.html#referencing -assets Установлено npm install -D sass-loader sass

создано переменные. S css в sr c

src / variables.s css

$primary: red;

создано и настроено vue .config. js в root папке

project- folder / vue .config. js

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

сейчас, в файле vue ниже Я пытаюсь получить доступ к переменной, объявленной в файле variables.s css. Но это вызывает ошибку: «$ primary» не определено.

src / components / HelloWorld. vue

<template>
  <div>
    <h1>Hello world</h1>
  </div>
</template>
<script>
export default {
  mounted(){
    console.log('mounted',$primary) // error: '$primary' is not defined, how to fix this ?

  }
}
</script>

Как использовать $ primary в HelloWorld . vue методы файла в смонтированном или любые другие функции в файле. vue?

вот мой пакет. json

пакет. json

{
  "name": "sass-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

Answer 1

Согласно документации, вы должны иметь доступ к переменной в тегах style, а не в javascript.

<template>
  <div>
    <h1>Hello world</h1>
  </div>
</template>

<script>
  export default {
    mounted(){
    }
  }
</script>

<style lang="scss">
  div h1 {
    background-color: $primary;
  }
</style>