Having trouble loading styles in Vue after publishing to npm

I'm currently using vue-cli3 for the npm publication of a Vue component.

Below are my build scripts:

"package-build": "eclint fix && vue-cli-service build --target lib --name @xchat-component/chat-component ./src/index.ts && shx cp ./src/index.d.ts dist/index.d.ts",

After importing this component into other projects, I noticed that all functions work as expected but the styling is not being applied.

Upon further investigation, I discovered that the CSS file is located in 

node_modules/component/dist/component.css

https://i.stack.imgur.com/vNDwn.png

Does anyone have a solution to this issue? Your help would be much appreciated. Thank you!

cssvue.jsnpmwebpackvue-cli

Answer №1

Hooray! I've successfully resolved my issue!

To start, you must generate a vue.config.js file within the Vue component project and insert the provided code snippet:

module.exports = {
  css: { extract: false },
};

Next, relocate the CSS section in Vue to ../assets/css/style.css and include ../assets/css/style.css as shown below:

<style scoped src="../assets/css/style.css">
</style>

Once packaged and deployed, the component will be able to access the CSS seamlessly!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Nuxt-Gmap displaying multiple infowindows

Does anyone know how to close an info window if a user clicks on another marker? In the Google documentation, you open infowindows manually, but in nuxt-gmap it's like this: <GMap :key="mapRender" ref= ...

javascriptvue.jsgoogle-mapsnuxt.js

What is the best way to customize the styles of a reusable component in Angular2?

I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...

javascriptcssangular

Rotate a shape to form a Rhombus at the center

I used the transform CSS property to create a rhombus, but I noticed that the center point of the shape is off-center to the right rather than in the middle. Can anyone help me figure out how to fix this issue? You can view my code here. .rhombus{ width ...

htmlcssrotationtransformcenter

Managing the placement of the expanded autocomplete input in Material-UI

Whenever I use the autocomplete fields on my website, I've observed an interesting behavior. When I select multiple options, the height of the input increases significantly, causing everything below it to shift downward like this. Is there a way to m ...

javascriptcssreactjsmaterial-ui

Oops! The internal server is throwing an error because it can't find the preprocessor dependency "sass." Have you made sure to install it

After setting up a new VUE 3 and typescript application with vite, I decided to add primevue and primeflex. However, when running npm run dev, an error message appeared as shown below: Can someone guide me on how to resolve this issue? Feel free to check ...

npmvite

Is it possible to have 3 divs with the height of the tallest

I have a unique template that I employ for crafting responsive websites. It relies on boxes with percentage widths, floats, and clears. A prime instance can be viewed via this link. Notice how the three boxes vary in height. While it's simple to set a ...

jqueryhtmlcssweb

Steps for displaying the dropdown menu

I am having trouble with displaying the dropdown menu when hovering over the class (dropbtn). I tried adding .dropdown:hover .dropdown-content-strategy{..} but it's not working as expected. If I do manage to show the dropdown menu, it stays visible ev ...

htmlcss

Text area featuring unique border design, with border color change upon focus?

Currently, I have a text area with borders that are designed in a unique way. However, I am looking to change the border color when the user focuses on the text area. Do you have any suggestions on how I can achieve this effect without affecting the curre ...

javascriptjqueryhtmlcssfrontend

To prevent the publication of the source directory in npm packages, be sure to utilize the .npm

When you use the npm publish command, it generates a tarball containing the src directory and then publishes it to the registry. Is there a method to exclude the src directory without having to rely on .npmignore? ...

npmnpm-publish

Strategies for spreading a mode to the composite component within VueJS

When it comes to the Vuetify text field component, there are numerous options available for customization. One idea is to create a custom text field component with predefined options such as icons, flat design, or boxed layout. However, I want to avoid man ...

vue.jsvuejs2vue-componentvuetify.js

Showing specific error messages in an Inertia Vue - Laravel application

My table is dynamic, allowing users to add multiple services with the option to select quantities and apply discounts. <tr v-if="proceduresList.length" v-for="(procedure,index) in proceduresList" :key="procedure.id"> ...

laravelvue.jsinertiajs

The property 'scrollHeight' is undefined and cannot be read

I've created a messaging system using javascript and php, but I'm facing an issue. When new messages are received or the chat log grows longer, it creates a scrollbar. The problem is that when a new message arrives, the user has to manually scrol ...

javascriptphpjqueryhtmlcss

Exploring SVG Morphing Reversal Techniques in Anime.js

I have been trying to implement direction: 'reverse' and timeline.reverse(), but so far it hasn't been successful. Interestingly, when I set loop: true, the reverse animation can be seen within the loop. However, my goal is to trigger this a ...

javascriptanimationvue.jssvganime.js

using an SVG mask declared in HTML to apply masking

I've been experimenting with masking using an SVG shape that I created in the HTML content. I've tried various options: mask, -webkit-mask mask-image, -webkit-mask-image different MaskUnits and MaskContentUnits mask-type: luminance or not Desp ...

htmlcsssvgmask

Show different components depending on immediate modifications and complete or incomplete data entry in Vue.js

I am trying to create a simple form with a search bar and two buttons. The goal is for the fill button to be visible only when there is text in the input, and for the empty button to show when the input is empty. I want the buttons to dynamically display o ...

javascriptvue.jsvuejs2

Unable to vertically align images in the carousel

Greetings! I am currently working on my website www.acigaiabeta.esy.es and I am facing an issue with aligning the images of the carousel to the center vertically. Despite trying various solutions, such as following tips from this resource, the images remai ...

htmlcss

Is there a way to ensure that the div of my template spans 100% in width and height?

I'm attempting to make my div 100% in size but I am having trouble achieving it. Here is my code: <template> <div> <Navbar/> <Calendar/> </div> </template> <script setup> import Calendar from &apos ...

cssvue.js

Installing Node and npm with brew is a breeze

Currently, I am in the process of setting up my system which requires me to uninstall the previous node and npm setups, and then reinstall them using brew. However, after uninstalling and trying to install node again with "brew install node," an error mess ...

node.jsubuntunpmhomebrewlinuxbrew

Having trouble with Visual Studio 2015 not compiling TypeScript within an ASP.NET Core project?

Seeking assistance with my Angular app development setup in VS2015. Even though it is recognized as a TypeScript Virtual Project, I am facing issues getting the transpiled files into the wwwroot folder within my ASP.NET Core project. Here's an overvie ...

angularjsvisual-studiotypescriptnpmvisual-studio-2015

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

htmlcss