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

What are the steps to installing web3 on an Ubuntu system?

Looking to set up web3 on my Ubuntu 18.04 system. I attempted the following: sudo npm install -g web3 but encountered this error message: npm ERR! git clone --template=/home/sj/.npm/_git-remotes/_templates --mirror [email protected]:web3-js/WebSocket ...

ubuntunpmweb3js

Troubleshooting problems with anchor-targets in Skrollr

I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work prop ...

javascriptjqueryhtmlcssparallax

Trouble aligning a div at the center within another div using margin auto

I am facing an issue with centering a div horizontally inside another div. Here is my HTML code: .block { padding: 0px 20px; max-width: 820px; margin: 0 auto; background-color: #ff0; } .container { margin: 0 auto; display: inline-block; bac ...

htmlcss

IE compatibility mode causing ckeditor dropdown to be hidden

When using the CKEditor editor bar inside a green div with another div below it, I noticed that when clicking on "font" or any other option that opens a dropdown menu, it gets hidden behind the bottom div. This issue seems to occur in browsers like Chrome ...

javascriptjqueryhtmlcssckeditor

Retrieve information from Datatable Vuetify using axios fetch

I am encountering an issue with displaying data from a GET axios API. When inspecting the endpoint call, it correctly returns an array with objects. However, when attempting to display this data in the datatable, it shows that there is no data available. & ...

vue.jsdatatableaxiosvuetify.js

The CSS selectors wrapped in jQuery vary between Chrome and Internet Explorer 11

When utilizing a jquery wrapped css selector such as $($("#selector").find('input[type="textarea"])'), I am able to input values into the textarea in Chrome using $($("#selector").find('input[type="textarea"]).val(someValue)') but encou ...

javascriptjqueryhtmlcssinternet-explorer

Mirror Image Iframes

Currently, I have been tasked with constructing a side-by-side "frame" using HTML. The idea is that when the content in the iframe on the left is selected, it will appear in the iframe next to it on the same page. Here's some additional context: The ...

javascripthtmlcss

Despite my specifying an HTTP registry, NPM continues to use HTTPS

My NPM project is configured to use a self-hosted NPM registry in Nexus. I need to access this repository via HTTP (unable to change this requirement), but no matter what steps I take, the resolved URL always defaults to the HTTPS version of the registry. ...

node.jsnpmnpm-installnexus

I'm having issues with npm installation, receiving a "module not found" error. I've

My experience with installing modules has been smooth so far, but recently I encountered an issue without changing my usual workflow. I executed: npm i --save mariadb in the main directory of my Node project. Then, I imported the module as follows: con ...

mysqlnode.jsjsonnpmmariadb

Centered header with underline styled using CSS pseudo element

I have centered heading text in a container, and I am using a border-bottom and pseudo element to create an underline effect. However, I am uncertain about how to make the underline stop at the end of the heading text. Here is my code: .headerWrap { ...

htmlcss

I'm having trouble displaying the X's and O's in my tic tac toe JavaScript game. Any suggestions on how to resolve this issue?

After following a couple of online tutorials for the tic tac toe project, I encountered an error in both attempts. The X's and O's were not displaying even though all other features were working fine. Below are my codes for HTML, CSS, and JavaScr ...

javascripthtmlcsstic-tac-toe

Tips for displaying a title within the border of a div

We have a client who is asking for a unique feature on their new website - they want the title to appear within the border of a text area. We need help figuring out how to achieve this using CSS/HTML. Take a look at the effect we are trying to create: htt ...

htmlcssbordertitle

What is the best method for setting up npm on Opsworks Rails application layer running on Ubuntu 12.04?

When using Ubuntu 12.04, the installation of nodejs from the regular sources results in an older version (0.6) that does not include npm. To access npm, it is necessary to manually install the upstream version. Similarly, adding nodejs to OS packages on t ...

ruby-on-railsnode.jsubuntu-12.04npmaws-opsworks

What is the best approach to implementing a filter in Vue 2 that is also compatible with Vue 3?

Currently, I am utilizing Vue.js 2+ version and have implemented a date formatting filter to meet my needs. However, I recently found out that Vue 3 has removed the filter functionality in favor of using computed properties or methods. My dilemma now is ho ...

javascriptvue.jsvue-filter

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

javascripthtmlcsssass

Discover the process of integrating PWA features into an Express web application

I'm currently in the process of integrating PWA into a web application. I've created a manifest.json file and added it to the head of my page, which is loading correctly. However, the service worker registered in my app.js doesn't seem to be ...

javascriptnode.jsexpressnpmprogressive-web-apps

The outcome of the JQuery function did not meet the anticipated result

Here is the code I am using: $("p").css("background-color", "yellow"); alert( $("p").css("background-color")); The alert is showing undefined instead of the expected color value. I have tested this code on both Google Chrome and Firefox. Strangely, it w ...

javascriptjqueryhtmlcss

What could be causing my transform scale to not function properly in Bootstrap?

As a complete beginner, I am currently in the process of learning bootstrap. I have noticed that the animation breaks when I apply it, specifically the scaling part. Interestingly, the animation works perfectly fine without Bootstrap. I am wondering if the ...

htmlcssbootstrap-5

Having issues with the sidebar malfunctioning and unsure of the cause

<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> I've been working on creating a sidebar for my website, but it's not functioning as expect ...

javascriptjqueryhtmlcss

Angular ensures that the fixed display element matches the size of its neighboring sibling

I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: The issue arises when setting the div's width as a percentage of the ...

htmlcssangularjstypescript