CODEWITHSUNDEEP
cssvue.jsnpmwebpackvue-cli
AngusHo53
AngusHo53

Reputation: 51

Cannot Load style in Vue when publish to npm

I'm using vue-cli3 to publish a vue component to npm.

Here is 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",

When I import this component in other projects, all functions are normal, but the style is not working.

But I found that css is in node_modules/component/dist/component.css

css

Is there any solution to this problem? Thank you!

Upvotes: 0

Views: 677

Answers (1)

AngusHo53
AngusHo53

Reputation: 51

I solved my problem!

First, you need to create vue.config.js in the vue component project and add the following code.

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

Then, you need to move the css part in vue to ../assets/css/style.css and import ../assets/css/style.css like below:

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

After package and publish, the component can read the CSS normally!

Upvotes: 2

Related Questions