0

I am using sass with vue version-3. In one of my components I have this code:

HelloWorld.vue :

<template>
  <div class="greetings">
    <h1>{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
</template>

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<style scoped lang="scss">
@use "sass:list";
@use "@/assets/sass-folder/variables";
@use "@/assets/sass-folder/main";
h1 {
    color: list.nth(variables.$theme-lighten-1, 2);
}
    
h3 {
  color: var(--blue);
}

</style>

In that component I inserted a main.scss file with the help of @use sass command. But the css variable --blue is not recognized by this component. This is the code of main.scss file:

main.scss :

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

//h3 {
//    color: red;
//}

If I un-comment the h3 styles in that file, the color of h3 tag in my component becomes red, so the file is imported correctly. Could anyone please help me which part of my codes is wrong that --blue variable is not recognized in HelloWorld.vue component?

hamid-davodi
  • 1,602
  • 2
  • 12
  • 26
  • Is this helping? https://stackoverflow.com/a/68986443/8816585 – kissu Sep 19 '22 at 17:11
  • 1
    @kissu That answer is about sass variables, But I used plain css hex color in my **scss** file. Also I used sass variables like that answer, but does not work. – hamid-davodi Sep 19 '22 at 17:20
  • Maybe the fact that it's scoped or the way it is imported (is @use fine for a root scope)? – kissu Sep 19 '22 at 17:38
  • @kissu, Yes, If I remove **scoped** the color works. How to use it in **scoped**? – hamid-davodi Sep 19 '22 at 17:52
  • I'm not sure that you can use a `:root` scoped variable because it is meant to be global with that declaration. If you want to use them locally, define them locally. Give a read to this article: https://blog.logrocket.com/css-variables-scoping/ Here, since you probably want a whole design system to be available pretty much anywhere, I think that importing your `main.scss` file into the main JS file of Vue is still the way to go. Then you will probably be able to still scope the CSS inside of your components. – kissu Sep 19 '22 at 18:32

1 Answers1

0

Option 1: The problem might be with how you use Scss

I've never worked with @use before. If I hook up your HelloWorld.vue with your main.scss the way I'm used to, your blue variable works. My standard way is to have a main.ts or main.js file. That file has just a few lines of code:

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/main.scss";

Option 2: The problem might be with the Scss itself

I would try mixing local <style scoped> and global <style> styles. Second, if that doesn't work, I'd try with a deep selector :deep() in my scoped style. Lastly, I'd try having my blue and white variables in the variables file instead of main.

I hope one of these options sends you the right direction.

kissu
  • 40,416
  • 14
  • 65
  • 133
Nina
  • 51
  • 1
  • 6
  • 1
    Importing it in a global scope works as I've explained in the comments above since it's part of the upper scope (`:root`). Here, OP wishes to import it into a scoped style tho, which indeed is not possible. Also please do [not recommend deprecated](https://stackoverflow.com/a/55368933/8816585) `deep selectors`. On top of that, I'm not even sure that it would help in that case. – kissu Sep 19 '22 at 20:25
  • 1
    Oh, I wasn't aware yet that the deep selectors got replaced. Do you think I should edit my answer or should I leave it so someone else can learn from my mistake and your comment? – Nina Sep 19 '22 at 20:43
  • 1
    Simply edit your answer, would be faster and better since not everybody is reading comments. – kissu Sep 19 '22 at 20:44