CODEWITHSUNDEEP
vue.jswebpacksassvue-cli-3chunks
sknight
sknight

Reputation: 1103

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

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

Upvotes: 0

Views: 467

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16441

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

Upvotes: 1

Related Questions