发布到 npm 时无法在 Vue 中加载样式

Question

我正在使用 vue-cli3 将 vue 组件发布到 npm。

这是我的构建脚本：

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

我在其他项目中导入这个组件时，功能正常，就是样式不行

但是我发现css在node_modules/component/dist/component.css

这个问题有什么解决办法吗？谢谢！

Answer 1

我的问题解决了！

首先需要在vue组件项目中创建vue.config.js，添加如下代码

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

然后，您需要将 vue 中的 css 部分移动到 ../assets/css/style.css 并导入 ../assets/css/style.css，如下所示：

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

打包发布后，组件可以正常读取CSS！

发布到 npm 时无法在 Vue 中加载样式

Cannot Load style in Vue when publish to npm

css

npm

webpack

vue.js

vue-cli