自定义组件发布到NPM后样式不生效怎么办?
我写了一个Vue的自定义按钮组件,本地测试样式正常,但打包发布到NPM后,别人安装使用时样式完全没加载。是不是我没正确处理CSS?
我在组件里写了scoped样式,也试过在package.json里加style字段指向CSS文件,但都不行。下面是我组件里的样式代码:
.my-button {
padding: 8px 16px;
background-color: #409eff;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
.my-button:hover {
opacity: 0.9;
}
关键点是要把样式文件单独打包出来。vue-cli默认会把样式打包到js里,需要改一下webpack配置:
然后确保package.json里正确指定了样式文件路径:
记得重新build再发布。别人安装时就能自动加载样式了。
另外如果你用了scoped样式,可以去掉scoped或者改用CSS Modules,这样更稳妥。