0

I'm using Vue-cli3.x, which is a multiple-pages project. I'm using SCSS in this project and separating the global basic styles with loaderOptions as following:

enter image description here

The styles relations like this: basic styles ---> components' styles ---> pages' styles

But after I building my project, I found my CSS files include basic styles more than once. EX: dashboardAirLeft page includes chunk-common.css and dashboardAirLeft.css, however in chunk-common.css and dashboardAirLeft.css all have normalize.scss code, like following:

enter image description here

And my production's Webpack config like this:

enter image description here

My destination is to separate the common code from my page-name css file

sknight
  • 1,063
  • 11
  • 15

1 Answers1

1

Using loaderOptions data property means that the files you import will be imported into every single components <style> tag. So each page-name css file will also import all three of the scss files you've defined. Instead, you probably want to import the common scss files only once in the App.vue component (or main entrypoint):

App.vue

<template>...</template>

<script>...</script>

<style lang="scss">
  @import "@/assets/styles/scss/normalize.scss"
  @import "@/assets/styles/scss/base-style.scss"
</style>

However, you do want the variables-custom.scss file imported into each page though so that you have access to your scss variables in each component. So you should leave only variables-custom.scss in your loaderOptions:

vue.config.js

css: {
  loaderOptions: {
    sass: {
      data: "@import '@/assets/styles/scss/variables-custom.scss'"
    }
  }
}
Chase DeAnda
  • 15,963
  • 3
  • 30
  • 41
  • Thanks for your reply. I try your method and get my aim. What's more, I have another question related to webpack. Could you help me, please? [This is the link](https://stackoverflow.com/questions/58740885/how-to-separate-a-specified-file-using-webpack-in-vue-cli-project) – sknight Nov 07 '19 at 02:01