include scss in vue 3 component library code example
Example 1: setup scss in vue
npm i node-sass sass-loader
// create the path: styles/main.scss in your src directory
–src
|––styles
|––main.scss
// add this to your vue.config.js file in the root directory
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/_variables.scss";`
}
}
}
};
Example 2: importing scss into vue component
<style lang="scss">
@import 'sass/app.scss';
html, body{
margin: 0px;
padding: 0px;
background-color: $secondary-color;
}
</style>