-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
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.
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
Comments
Please provide a runnable reproduction, as explained in the issue template. We will repoen when you do so. |
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. Edit: This is the ui library barebones implementation |
Thanks for trying to provide a reproduction. A github repository is totally fine. |
FYI the reproduction is invalid because there's no way for us to install your private components. |
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. |
Please check the following repo sanchitgn/comp-css. It has no internal dependencies. For some reason webpack wouldn't recognize the module name in I've published a dummy module comp-lib to npm. It does not have any vendor-prefixed code. Just an export of
Edit: FIXED Seems like the |
https://github.com/webpack/webpack/tree/master/examples/side-effects Possibly related: webpack/webpack#6741 |
vue_cli3.0.5,The "sideEffects": false in package.json.After build, all CSS is lost, including <style> written in App.vue. |
add |
I was going crazy too why this isn't working. Adding this line fixed it. Thanks! |
Nothing changed? Is this still the solution? The size grows considerably with this solution |
You can find more information in the webpack documentation about this feature. It's not related to Vue CLI. |
Thanks |
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 So, now, when I put I think I might just be dumb, in this case, sorry, but I'm a bit lost here. |
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. |
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. |
Did you import the css file into your nuxt app? |
@efstajas - did you ever figure this out? I'm running in to the same issue with Nuxt. |
T H A N K S !!!!! |
@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. |
|
Uh oh!
There was an error while loading. Please reload this page.
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 asPrior 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?)
The text was updated successfully, but these errors were encountered: