I am currently developing a vue.js web application and I want to utilize SCSS for styling purposes. I have installed npm i node-sass sass-loader and have created a vue.config.js at the root level. Here is what I have set up in the configuration file:
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import "@/styles/global.scss";`
}
}
}
};
Here is the folder structure for SCSS:
https://i.sstatic.net/Ln9Ki.png
Within every subfolder of the main styles folder, I have an _all.scss file that imports all the contained .scss files for that specific subfolder. In the global.scss file, all the subfolder's _all.scss files are imported.
// styles/base/_all.scss
@import 'reset.scss';
@import 'variables.scss';
// global.scss
@import 'base/all';
@import 'components/all';
However, my web application does not load any of the imported .scss files or styles from the main global.scss file. I am not receiving any build errors, and if I remove the _variables.scss file, I get an error stating that other .scss files cannot access the declared SCSS variables. This indicates that my import method for .scss is functioning properly, but the styles are not being displayed for some reason.
Should I rely on using the <style> tag within each vue component for styling, or is there a way to make my current structure work?