Menu
You have SCSS variables in one file that you want to make available to your Vue components. The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue's single file components you can simply add lang="scss" to the <style> block ( docs).
To add global CSS in Vue. js, we can import our global CSS file in main. js . import "./assets/css/main.
Install vue 3 (You can probably skip this step if you have Vue already set up!) If you have the Vue CLI tool, just run vue create scss and select Vue 3. There is an option to set up CSS pre processors from the CLI tool but for this article I will ignore that option. Once set up, cd scss to move into that directory.
To make Sass (or, specifically, SCSS in this case) variables available to JavaScript, we need to “export” them. The :export block is the magic sauce webpack uses to import the variables. What is nice about this approach is that we can rename the variables using camelCase syntax and choose what we expose.
I am trying to import a scss file within my VueJS project, where it will then compile and thus be able to use with my project. However, I need some help, as at present it simply errors. Is there a way to do this? Please note, I am very new to VueJS so I'm just getting my head around the basics.
I created a folder called scss within my src folder, which contains my main.scss file. Next in my Vue.JS I have the following code;
<template>
<div id="app">
<Home></Home>
<Primary></Primary>
<Secondary></Secondary>
</div>
</template>
<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'
export default {
name: 'app',
components: {
'Home': Home,
'Primary': Primary,
'Secondary': Secondary
}
}
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/scss/main.scss";
`
}
}
}
};
</script>
<style lang="scss">
#app {
display:block;
}
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With