8000 Prod build does not load component library css · Issue #1287 · vuejs/vue-cli · GitHub
[go: up one dir, main page]
Skip to content

Prod build does not load component library css #1287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
sanchitnevgi opened this issue May 14, 2018 · 21 comments
Closed

Prod build does not load component library css #1287

sanchitnevgi opened this issue May 14, 2018 · 21 comments
Labels
needs reproduction This issue is missing a minimal runnable reproduction, provided by the author

Comments

@sanchitnevgi
Copy link
Contributor
sanchitnevgi commented May 14, 2018 •
edited
Loading

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
Copy link
Member
LinusBorg commented May 14, 2018 •
edited
Loading

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

We will repoen when you do so.

@sanchitnevgi
Copy link
Contributor Author
sanchitnevgi commented May 14, 2018 •
edited
Loading

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 LinusBorg reopened this May 14, 2018
@LinusBorg
Copy link
Member
LinusBorg commented May 14, 2018 •
edited
Loading

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

@yyx990803
Copy link
Member

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

@yyx990803 yyx990803 added the needs reproduction This issue is missing a minimal runnable reproduction, provided by the author label May 15, 2018
@yyx990803
Copy link
Member

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
Copy link
Contributor Author
sanchitnevgi commented May 15, 2018 •
edited
Loading

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
Copy link
Contributor Author
8000

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

@edmorley edmorley mentioned this issue Oct 2, 2018
Closed
@ZTrainWilliams
Copy link

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

@leafiy
Copy link
leafiy commented Oct 30, 2018 •
edited
Loading

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
Copy link

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!

@joaoeudes7
Copy link

Nothing changed? Is this still the solution? The size grows considerably with this solution

@LinusBorg
Copy link
Member

sideEffects: ['*.css']

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

@joaoeudes7
Copy link

Thanks

@efstajas
Copy link

Hey, super sorry to reopen this thread — I think I have the same problem and I'm a bit stuck even after trying everything explained here.

This is my library repo: https://github.com/bingo-bango-corp/simsalabim-design

I set css: { extract: false } there initially, and everything works fine. I can import components from the package and styles are there. However, now, we're setting up some pages in nuxt, and that approach won't work there because applying the inlined styles obviously causes a document is undefined error. We could disable server side rendering for these components of course, but it would kind of defeat the purpose of using nuxt in the first place as lots and lots of components will be coming from the above bundle.

So, now, when I put "sideEffects": ["*.css"] in package.json, I don't get a css file at all in dist, even with extract specifically set to true in vue.config.js. Meaning — nuxt doesn't crash on render, but there's also no styles. Setting sideEffects: false of course results in no styles either.

I think I might just be dumb, in this case, sorry, but I'm a bit lost here.

@LinusBorg
Copy link
Member

Just remove the sideEffects flag, it won't have any positive effect on the bundled code as we pack won't be able to treeshake anything anyway.

Unless your package is also consumable unpackaged source.

@efstajas
Copy link
efstajas commented Jun 2, 2019

Thanks for the response! When I remove the sideEffects flag and set extract to true, I get a CSS file but the styles aren't being displayed. With no sideEffects flag and extract set to false, I get styles embedded in the bundle, which works fine for a normal Vue app but does not support server side rendering in Nuxt. For now I'm using my library as client-side only in nuxt, which of course works, but since I'm planning to extract a lot of components to my library I'd really like to find a way to render these on the server.

@LinusBorg
Copy link
Member

but the styles aren't being displayed.

Did you import the css file into your nuxt app?

@morficus
Copy link

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

@LobotheStark
Copy link

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?

T H A N K S !!!!!

@Aravinda93
Copy link

@morficus I am also getting the same issue in my Nuxtjs application. Have you found the solution. If you have some work-around then please provide the same. thanks a lot in advance-

@sanchitnevgi If you have some solution for nuxtjs please provide it.
@leafiy

@naingairitech
Copy link

but the styles aren't being displayed.
How about just importing your extracted css file in main.js?

@snyk-bot snyk-bot mentioned this issue Aug 1, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs reproduction This issue is missing a minimal runnable reproduction, provided by the author
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
0