vue-cli: Prod build does not load component library css

Version

3.0.0-beta.10

Steps to reproduce

I have a component library that exports .vue files styled with .scss. These are consumed in my project as

import { SomeComponent } from "@comp/lib";

Vue.use("some-component", SomeComponent);

Prior to beta.10, the component css would work as expected (Tested on beta.6). Once I’ve upgraded to beta.10, The Prod build no longer has the component css. A thing I’ve noticed it the bundled output css has reduced (From a single 30kb file to multiple files NOT totalling to 30kb [~25kb]).

What is expected?

Component css should be present in Prod build

What is actually happening?

Component css is not present in Prod build

Edit:

Reproduction Link:

https://github.com/sanchitgn/comp-css

Some more details: The component library is hosted on an internal npm. It’s a repo with a bunch of .vue files. My guess is, this has to do with webpack 4 (tree-shaking?)

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 21 (10 by maintainers)

Most upvoted comments

vue_cli3.0.5,The “sideEffects”: false in package.json.After build, all CSS is lost, including <style> written in App.vue.

add css: { extract: false } to vue.config.js maybe a bug?

+41

leafiy on Oct 30, 2018

vue_cli3.0.5,The “sideEffects”: false in package.json.After build, all CSS is lost, including <style> written in App.vue.

ZTrainWilliams on Oct 16, 2018

sideEffects: ['*.css']

You can find more information in the webpack documentation about this feature. It’s not related to Vue CLI.

LinusBorg on Feb 9, 2019

@efstajas - did you ever figure this out? I’m running in to the same issue with Nuxt.

morficus on Aug 30, 2019

Please check the following repo sanchitgn/comp-css. It has no internal dependencies. For some reason webpack wouldn’t recognize the module name in main.js so I had to reference the folder directly in node_modules.

I’ve published a dummy module comp-lib to npm. It does not have any vendor-prefixed code. Just an export of .vue components.

development build works fine. However the production build loses all css.

Edit: FIXED

Seems like the sideEffects: false flag in package.json in the comp library was the issue. Although isn’t this a valid use case for sideEffects? Not to mention it worked fine before beta.10

sanchitnevgi on May 15, 2018