使用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中保留only loaderOptions：

vue.config.js

css: {
  loaderOptions: {
    sass: {
      data: "@import '@/assets/styles/scss/variables-custom.scss'"
    }
  }
}