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

【问题标题】：Separate global basic styles from every page using webpack in vue-cli3在 vue-cli3 中使用 webpack 从每个页面中分离全局基本样式
【发布时间】：2020-03-02 19:11:15
【问题描述】：

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

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

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

而我的产品的 Webpack 配置如下：

我的目标是将公共代码从我的页面名称 css 文件中分离出来

【问题讨论】：

标签： vue.js webpack sass vue-cli-3 chunks

【解决方案1】：

使用loaderOptions 数据属性意味着您导入的文件将被导入每个组件<style> 标签。因此，每个页面名称 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'"
    }
  }
}

【讨论】：

感谢您的回复。我试试你的方法，达到我的目的。更重要的是，我还有一个关于 webpack 的问题。请问你能帮帮我吗？ This is the link