question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prod build does not load component library css

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:21 (10 by maintainers)

github_iconTop GitHub Comments

41reactions
leafiycommented, 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.

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

8reactions
ZTrainWilliamscommented, Oct 16, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom React Component Library not loading CSS when ...
I am trying to create a custom react component library using rollup, css-modules and tailwind css. The problem is when I try to...
Read more >
Solving the React Error: Not Picking Up CSS Style | Pluralsight
In this guide, you will learn about the errors that can occur while importing a CSS file into your React file.
Read more >
Why you should build a React Component Library, and style it ...
The browser loads the page with the structure of the page, but not its styles. I know what you're thinking. Wait a minute?...
Read more >
How to Create and Publish a React Component Library
This tutorial will take you through the process of creating and publishing your own custom React component library and hosting it on Github....
Read more >
Using Angular routes in a single-page application
You might find the Tour of Heroes tutorial helpful, but it is not required. ... In your code editor, open the file, app.component.html...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found