Issue with undefined Sass variable when using Global Sass variable in Vue 3 with Vite: [sass] Undefined variable error

https://i.sstatic.net/7K0uF.png

Greetings! I have embarked on the journey of migrating a Vue application from Webpack to Vite. To kick things off, I am starting with a small project.

However, I seem to be encountering an error: '[sass] Undefined variable' when attempting to utilize the $globalColor variable in the App.vue component. Despite configuring the css preprocessor in Vite as shown in the code snippet I've shared, I haven't been successful in resolving this issue. I've gone through various posts and it seems like everyone suggests that this is the solution.

In the long run, my goal is to have Bootstrap mixins and variables available globally so that I don't have to import Bootstrap into every single component, much like what I'm currently doing in the App.vue component.

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.69.5",
    "vite": "^4.4.5"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/scss/global.scss";`
      }
    }
  }
})

src/main.js

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

createApp(App).mount('#app')

src/style.scss

@import "@/scss/_vars";
@import "~bootstrap/scss/bootstrap";

src/scss/_var.scss

$my-padding-top: 64px;

src/scss/global.scss

$globalColor: pink;

src/App.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div class="mt-5">
    aaaaaa
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style lang="sass" type="text/sass" scoped>
@import "~bootstrap/scss/bootstrap"
@import "@/scss/_vars"

div
  color: $globalColor
  padding-top: $my-padding-top

@include media-breakpoint-down(lg)
  body
    background-color: $primary
</style>

I greatly appreciate any assistance provided!

Answer №1

The issue has been identified - it seems that mixing Scss and Sass is causing the problem.

Specifically in my Vite configuration, I have the following:

...
scss: {
    additionalData: `@import "@/scss/global.scss";`
}
...

Furthermore, in the App.vue file, this code exists:

<style lang="sass" type="text/sass" scoped>
...

By ensuring consistency between using either Scss or Sass as the preprocessor, I am able to successfully utilize the $globalVariable that was previously defined.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An animation in CSS where an element moves off the screen to the right in absolute position and then returns from the

I am currently working on a website featuring moving clouds traveling across the screen from left to right. Although I have successfully implemented the animation for the clouds, there is one specific issue that has me stuck. My goal is to display some of ...

Can you provide a succinct explanation of what constitutes a well-defined "landing page"?

Could someone provide a clear and concise explanation of what exactly constitutes a landing page and how it should be utilized? I'm struggling to grasp the concept. Where is the optimal placement for a landing page on a website? Is it best placed o ...

Exchange information between two components (independent of parent-child relationship)

Element 1 getData(){ this.$root.$emit('event'); console.log("emitted") }, Element 2 mounted() { this.$root.$on('event', () = { alert("Triggered"); } } I am attempting to trigger "Triggered" from element 2 u ...

How can I deactivate Bootstrap specifically within a certain block of content?

Is there a way to deactivate Bootstrap within a specific section? I want the styles from Bootstrap's CSS file to be overridden inside this div. ...

Arrange objects in dropdown menu to line up

I'm currently working on a dropdown menu and I have a specific requirement – the menu should always be split into two columns and be able to span multiple lines. However, I've encountered an issue where the columns are not aligned properly, cau ...

Employ jQuery to display a text box with a sliding motion upon hovering the mouse cursor over a specific area

Beginner inquiry about jQuery. Imagine I have a label on my webpage and I am looking to create a sliding effect for an input box when hovering over the label. Can anyone offer tips on utilizing jQuery to make this happen? ...

When working with Vue.js, toggling the 'readonly' attribute of a textarea between true and false may not be effective

My goal is to accomplish the following: Allow the textarea to be edited when double-clicked; Prevent the textarea from being edited when it loses focus; However, regardless of toggling the 'readonly' attribute, I am currently unable to achieve ...

Retrieve data from an online JSON file

I am still learning about working with json and would appreciate some guidance. The data file I need to access is located at this url - I would like to display it in the following format: <ul id="smenu"> <li></li> </ul> Cou ...

Firebase: The Firebase application under the name '[DEFAULT]' is already present (app/duplicate-app)

My Nuxt/Vue.js application requires me to export various Firestore-related elements instead of just firebase.firestore(). Despite this, I am encountering an error stating Firebase App named '[DEFAULT]' already exists (app/duplicate-app) with the ...

How can I center two div buttons within a bootstrap column?

My issue is as follows: I currently have two circles stacked on top of each other, but I would like to position them side by side. Below is the HTML for the existing layout: <div class="col-lg-6"> <div class="page-scroll" style="text-align:c ...

Responsiveness of a div containing various content

I am currently working with Bootstrap 4 and my HTML code looks like this: <div class="font-weight-bold col-12"> <span>Filter :</span> <input type="text" class="form-control" /> </div> Initial ...

What could be the reason for body height displaying as zero even when a non-zero value is specified?

My current code snippet is as follows: ... <STYLE> body{ position: static; height: 95%; width: 95%; border: 2px; border-style: solid; border-radius: 5px; border-color: black; background-color: pink; } <STYLE> ...

issues encountered when attempting to modify the background color of navigation items using bootstrap

Presently, I am focusing on enhancing the navigation bar of my website, but I have encountered an issue with my JavaScript code. I have implemented a scroll-spy feature in my navigation and added JavaScript for smooth scrolling. Additionally, I aim to make ...

Conceal a script-generated div using CSS styling

Using the code below, you can create an HTML chatbox with a link in the top panel and multiple child divs. The structure is as follows: cgroup is the parent of CBG, which is the parent of CGW, and CGW is the parent of the div I want to hide. How can I u ...

The CSS gradient background fails to fully cover the background when scrolling on the web browser

My webpage has a beautiful gradient background, but unfortunately, when the page is zoomed in, the gradient stops working and only the background color is displayed. Here is a snippet of the code: <html> <head> <style type="tex ...

Does Vuejs have a counterpart to LINQ?

As a newcomer to javascript, I am wondering if Vue has an equivalent to LinQ. My objective is to perform the following operation: this.selection = this.clientsComplete.Where( c => c.id == eventArgs.sender.id); This action would be on a collect ...

Arranging nested Divs for horizontal scrolling purposes

I'm struggling to achieve horizontal scrolling only in my provided example link HERE. It seems like a simple fix should be adding {overflow-x:auto; and overflow-y:hidden;} in the CSS, but I've tried that and it's not giving me the desired re ...

Is there a way to manipulate the appearance of a scroller using JavaScript?

I'm intrigued by how fellow front-end developers are able to customize the scrollbar shape on a webpage to enhance its appearance. Can anyone guide me on using JavaScript to accomplish this? ...

Vue2Leaflet does not seem to be able to place a custom icon on the map

I've attempted numerous examples, but all I get are broken images or default icons <l-marker v-for="marker in getFilteredVehicles" :lat-lng="marker.latLng" :key="marker.rtoNo" @click="o ...

The appearance of the logout button may differ depending on the web browser being used

I have implemented a straightforward logout button using the following code: <li><a href="http://localhost:8666/web1/profile/mainpage/logout.php" onclick="return confirm('Are you sure to logout?');">Log Out</a>&l ...