Embarking on my first VueJS project, I decided to create a global stylesheet to maintain consistent styles across different components. After installing the SCSS loader and setting up my stylesheets, I encountered an issue.
$mainFont: 'PoppinsRegular, Arial';
$mainFontSemiBold: 'PoppinsSemiBold, Arial';
$mainFontItalic: 'PoppinsRegularItalic, Arial';
$primaryColor: #fff;
$secondaryColor: #dce0e6;
$tertiaryColor: #f0f4f7;
$quaternaryColor: #233240;
$quinaryColor: #0e5fa4;
$senaryColor: #14a30f;
$septenaryColor: #cd3c2d;
$octonaryColor: #6C757D;
$undenaryColor: #7e848c;
$duodenaryColor: #19b4c2;
I followed the documentation and tried importing the stylesheet into my main.js file using two different methods as suggested.
import Vue from 'vue'
import App from './App.vue'
import './assets/scss/_variables.scss'
// Another alternative method I tested
// require('./assets/scss/_variables.scss')
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
Subsequently, in my 'home' component, I updated the style section header and used one of the colors defined in the imported stylesheet.
<style lang='scss' rel='./assets/scss/_variables'>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: $septenaryColor;
}
</style>
However, I must be overlooking something as I'm encountering an error in the console indicating that the color reference in my styles is not being recognized.
"Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable: "$septenaryColor". on line 56 of src/components/HelloWorld.vue
color: $septenaryColor;
---------^"
If anyone can provide assistance or help spot my mistake, I would greatly appreciate it. Thank you for your time and support in advance.