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

Posted 2023-02-22

【中文标题】发布到 npm 时无法在 Vue 中加载样式

【英文标题】：Cannot Load style in Vue when publish to npm

【发布时间】：2021-04-14 00:33:24

【问题描述】：

我正在使用 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

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

【参考方案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！