我正在使用Vue-cli3.x，这是一个多页项目。我在此项目中使用SCSS，并使用 loaderOptions 分隔全局基本样式，如下所示：
这样的样式关系：基本样式--->组件样式--->页面样式
但是在构建项目后，我发现我的CSS文件不只包含基本样式。 例如： dashboardAirLeft页面包括 chunk-common.css 和 dashboardAirLeft.css ，但是在 chunk-common.css 中和 dashboardAirLeft.css 都具有 normalize.scss 代码，如下所示：
我的作品的Webpack配置如下：
我的目标是将通用代码与页面名称css文件分开
使用loaderOptions数据属性意味着您导入的文件将被导入到每个单独的组件<style>标签中。因此，每个页面名称的CSS文件也将导入您定义的所有三个CSS文件。相反，您可能只想在App.vue组件（或主入口点）中导入公共scss文件一次：
App.vue
<template>...</template>
<script>...</script>
<style lang="scss">
@import "@/assets/styles/scss/normalize.scss"
@import "@/assets/styles/scss/base-style.scss"
</style>
但是，您确实希望将variables-custom.scss文件导入每个页面，以便可以访问每个组件中的scss变量。因此，您应该仅在您的variables-custom.scss中保留 loaderOptions：
vue.config.js
css: {
loaderOptions: {
sass: {
data: "@import '@/assets/styles/scss/variables-custom.scss'"
}
}
}