在vue-cli3中使用webpack将每个页面的全局基本样式分开

Question

我正在使用Vue-cli3.x，这是一个多页项目。我在此项目中使用SCSS，并使用 loaderOptions 分隔全局基本样式，如下所示：

这样的样式关系：基本样式--->组件样式--->页面样式

但是在构建项目后，我发现我的CSS文件不只包含基本样式。 例如： dashboardAirLeft页面包括 chunk-common.css 和 dashboardAirLeft.css ，但是在 chunk-common.css 中和 dashboardAirLeft.css 都具有 normalize.scss 代码，如下所示：

我的作品的Webpack配置如下：

我的目标是将通用代码与页面名称css文件分开

Answer 1

使用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'"
    }
  }
}