Separate global basic styles from every page using webpack in vue-cli3 - vue.js

Question

I'm using Vue-cli3.x, which is a multiple-pages project. I'm using SCSS in this project and separating the global basic styles with loaderOptions as following:
The styles relations like this: basic styles ---> components' styles ---> pages' styles
But after I building my project, I found my CSS files include basic styles more than once.
EX: dashboardAirLeft page includes chunk-common.css and dashboardAirLeft.css, however in chunk-common.css and dashboardAirLeft.css all have normalize.scss code, like following:
And my production's Webpack config like this:
My destination is to separate the common code from my page-name css file

Answer 1

Using loaderOptions data property means that the files you import will be imported into every single components <style> tag. So each page-name css file will also import all three of the scss files you've defined. Instead, you probably want to import the common scss files only once in the App.vue component (or main entrypoint):
App.vue
<template>...</template>
<script>...</script>
<style lang="scss">
#import "#/assets/styles/scss/normalize.scss"
#import "#/assets/styles/scss/base-style.scss"
</style>
However, you do want the variables-custom.scss file imported into each page though so that you have access to your scss variables in each component. So you should leave only variables-custom.scss in your loaderOptions:
vue.config.js
css: {
loaderOptions: {
sass: {
data: "#import '#/assets/styles/scss/variables-custom.scss'"
}
}
}