在 vue-cli3 中使用 webpack 从每个页面分离全局基本样式

Question

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

样式关系如下：基本样式--->组件样式--->页面样式

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

我的产品的 Webpack 配置是这样的：

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

Answer 1

使用 loaderOptions 数据属性意味着您导入的文件 将被导入每个组件 <style> 标签 。因此每个 page-name css 文件也将导入您定义的所有三个 scss 文件。相反，您可能只想在 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 变量。所以你应该在你的 loaderOptions:

中留下 only variables-custom.scss

vue.config.js

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

在 vue-cli3 中使用 webpack 从每个页面分离全局基本样式

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

sass

chunks

webpack

vue.js

vue-cli-3