Prod build does not load component library css

[sanchitnevgi]

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?)

[LinusBorg]

Please provide a runnable reproduction, as explained in the issue template.

We will repoen when you do so.

[sanchitnevgi]

I don't know how to provide a reproduction for this particular issue. It relies on installing a 3rd party npm component package. The issue seems to be that vue-cli ignores the 3rd party component css. Nonetheless I've added a basic reproduction.
The 3rd party lib exports an index.js file with a .vue file

Edit:

This is the ui library barebones implementation
https://github.com/sanchitgn/comp-lib

[LinusBorg]

Thanks for trying to provide a reproduction. A github repository is totally fine.

[yyx990803]

FYI the reproduction is invalid because there's no way for us to install your private components.

[yyx990803]

My guess is this has to do with vendor-prefixed rules being removed during the CSS optimization pass - and you didn't include the non-prefixed version of the rules. If that's not the case, please open a new issue with proper, runnable reproductions.

[sanchitnevgi]

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]

The "sideEffects": false flag in big-module's package.json indicates that the package's modules have no side effects (on evaluation) and only expose exports. This allows tools like webpack to optimize re-exports. In the case import { a, b } from "big-module-with-flag" is rewritten to import { a } from "big-module-with-flag/a"; import { b } from "big-module-with-flag/b".

The example contains two variants of big-module. big-module has no sideEffects flag and big-module-with-flag has the sideEffects flag. The example client imports a and b from each of the variants.

After being built by webpack, the output bundle contains index.js a.js b.js c.js from big-module, but only a.js and b.js from big-module-with-flag.

https://github.com/webpack/webpack/tree/master/examples/side-effects

Possibly related: webpack/webpack#6741

[ZTrainWilliams]

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

[leafiy]

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?

[san-kumar]

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

I was going crazy too why this isn't working. Adding this line fixed it. Thanks!