解决vite构建库模式和 es 格式中css样式加载问题(也可单独在组件下引入)
1.当使用vite构建库模式或es格式组件,组件样式需单独引入否则组件是没有css样式的
<style>
@import "/package/subassembly/css/style.css";
//挂载组件样式
//挂载组件样式
</style>
注:如果同一个项目使用多个组件,引入的CSS样式名相同会导致CSS样式来回覆盖导致错误文章来源地址https://www.toymoban.com/news/detail-777554.html
2.可以使用vite-plugin-libcss插件(推荐)链接:
3. 安装
//装置
npm i vite-plugin-libcss -D
4. 用法
// vite.config.js
import libCss from 'vite-plugin-libcss';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// any other plugins
libCss()
],
build: {
cssCodeSplit:true,
}
});
文章来源:https://www.toymoban.com/news/detail-777554.html
到了这里,关于解决vite构建库模式和 es 格式中css样式加载问题(也可单独在组件下引入)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!