Vue-loader: CSS duplicate

[fundon]

[email protected]

Component A:

<template>
  <div></div>
</template>
<style lang="scss">
@import "~bulma";

/* do something */
</style>

Component B:

<template>
  <div></div>
</template>
<style lang="scss">
@import "~bulma";

/* do something *
</style>

Problem:

The bulma library will be import twice.

How to fix this?

Real show case, see http://vue-admin.fundon.me/#!/ui/notifications.

[yyx990803]

Are you using mixins from the lib? If not you should import it only once in your root component.

If not, this should be deduped by cssnano when you are building for production.

[airyland]

I also encountered the problem. I split WeUI's less styles into Vux's every component, so some less files are imported more than once. This works fine when developing. But after building, the duplicate styles remain. So I simply created a script to compress it(142k -> 90k). But I wonder if there is a easier way?

const cssnano = require('cssnano')
const fs = require('fs')
const path = require('path')

const code = fs.readFileSync(path.resolve(__dirname, '../dist/vux.css'))
cssnano.process(code.toString(), {zindex: false}).then(function (result) {
  fs.writeFileSync(path.resolve(__dirname, '../dist/vux.min.css'), result.css)
})

I try to config vue loader's postcss option, but it doesnot work.

vue: {
    postcss: [require('cssnano')({zindex:false})]
 }

[fundon]

@airyland I sloved it.

Using mixins from the lib.
Like https://github.com/fundon/vue-admin/blob/master/src/components/Sidebar.vue#L78.

[mrg0lden]

@fundon Hello, the provided URL gives error 404, can you explain the solution?
Edit:
Well, I found it. the solution is to import only the variables, so it won't affect the size when it gets compiled

[c4milo]

I ran into the same issue, cssnano did indeed remove it when compiling for production. @yyx990803 is there anyway to achieve de-duplication in development mode?

[mrg0lden]

@c4milo when using scss or sass, import the variables and mixins only. For styles, you can import them once in the main file

[christophwolff]

I would also like to know how to avoid dublicate styles in development.

[mrg0lden]

@christophwolff as I said, separate your variables from your styles, import your variables everywhere you need them. Import your styles once in the root component. Good luck.

[christophwolff]

@mrg0lden Thank you. But my Problem is, i want to use the grid system from bootstrap in some components. And these are mixins. @include media-breakpoint-up i.e. So there is no other way around that.