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!