I am currently working on a vue.js web application and I want to incorporate SCSS. To do this, I have installed npm i node-sass sass-loader. Additionally, I have created a vue.config.js file at the root level of my project:
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "@/style.scss";`,
},
},
},
};
All my styles are stored in the main.scss file and imported into the style.scss file.
@import './color';
@import './mixin';
@import './break-point';
@import './common';
@import './form';
The issue I am facing is that none of the .scss files or styles imported through the main style.scss file are loading in my web app. Interestingly, there are no errors being displayed in the console.
I have also created separate .scss files for each page and included the style.scss import in the specific page's CSS as shown in the image below: