Отделите основные глобальные стили от каждой страницы с помощью веб-пакета в vue-cli3

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 свойства data означает, что импортируемые вами файлы будут импортированы в каждый отдельный компонент <style> tag . Таким образом, каждый CSS-файл page-name также будет импортировать все три файла scss, которые вы определили. Вместо этого вы, вероятно, захотите импортировать общие файлы scss только один раз в компоненте App.vue (или главной точке входа):

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