当前位置: 首页 > Web前端 > vue.js

ElementUI反复引入样式问题

时间:2023-03-31 18:42:51 vue.js

;@import'@/assets/css/element-theme.scss';背景:vue-cli创建的项目,ElementUI作为UI组件库,采用按需引入组件的方式,在项目中使用改变SCSS变量的方式来定义主题。但是项目打包后,有两个样式文件,一个在app.css,一个在chunk-vendors.css。App.css全量导入,样式与组件默认样式不同。Chunk-vendors.css按需导入,样式为组件默认样式。现状使用babel-plugin-component按需引入组件改变Element的样式变量,js方式导入'./element-variables.scss'解决方法:配置babel-plugin-component(仅全量导入)成两个var.sass和theme.sass文件(可完整导入)建议重依赖使用NO.1,轻依赖使用NO.2。NO.1建议修改babel文件的配置不打包ElementUI组件库{presets:[['es2015',{modules:false}]],plugins:[['component',{libraryName:'element-ui',//styleLibraryName:'theme-chalk',//删除这一行style:false,//添加这一行}]]}更改项目中的SCSS变量如果您的元素的主题粉笔是用SCSS编写的项目也使用了SCSS,可以直接在项目中更改Element的样式变量。新建一个样式文件,如element-variables.scss,写入如下内容:/*更改主题颜色变量*/$--color-primary:teal;/*更改图标字体路径变量,必填*/$--font-path:'~element-ui/lib/theme-chalk/fonts';@import"~element-ui/packages/theme-chalk/src/index";之后直接在项目的入口文件导入上面的样式文件就可以了(不需要引入Element编译好的CSS文件):importVuefrom'vue'importElementfrom'element-ui'import'./element-variables.scss'Vue.use(Element)NO.2新建一个sass文件/*src/assets/element-var.scss*/$--color-primary:teal;/*更改图标字体路径变量,必填*/$--font-path:'~element-ui/lib/theme-chalk/fonts';@import"~element-ui/packages/theme-chalk/src/index";/*src/assets/element-theme.scss*/@import"~element-ui/packages/theme-chalk/src/input.scss";@import"~element-ui/packages/theme-chalk/src/radio.scss";//@import"~element-ui/packages/theme-chalk/src/checkbox.scss";...在App.vue@import'@/assets/css/element-var.scss'中引入;@import'@/assets/css/element-theme.scss';完整组件样式导入方法ElementUI2.12.0所有样式引用@import"~element-ui/packages/theme-chalk/src/pagination.scss";@import"~element-ui/packages/theme-chalk/src/dialog.scss";@import"~element-ui/packages/theme-chalk/src/autocomplete.scss";@import"~element-ui/packages/theme-chalk/src/dropdown.scss";@import"~element-ui/packages/theme-chalk/src/dropdown-menu.scss";@import"~element-ui/packages/theme-chalk/src/dropdown-item.scss";@import"~element-ui/packages/theme-chalk/src/menu.scss";@import"~element-ui/packages/theme-chalk/src/submenu.scss";@import"~element-ui/packages/theme-chalk/src/menu-item.scss";@import"~element-ui/packages/主题粉笔/src/menu-item-group.scss";@import"~element-ui/packages/theme-chalk/src/input.scss";@import"~element-ui/packages/theme-chalk/src/input-number.scss";@import"~element-ui/packages/theme-chalk/src/radio.scss";@import"~element-ui/packages/theme-chalk/src/radio-group.scss";@import"~element-ui/packages/theme-chalk/src/radio-button.scss";@import"~element-ui/packages/theme-chalk/src/checkbox.scss";@import"~element-ui/packages/theme-chalk/src/checkbox-button.scss";@import"~element-ui/packages/theme-chalk/src/checkbox-group.scss";@import"~element-ui/packages/theme-chalk/src/switch.scss";@import"~element-ui/packages/theme-chalk/src/select.scss";@import"~element-ui/packages/theme-chalk/src/button.scss";@import"~element-ui/packages/theme-chalk/src/button-group.scss";@import"~element-ui/packages/theme-chalk/src/table.scss";@import"~element-ui/packages/theme-chalk/src/table-column.scss";@import"~element-ui/packages/theme-chalk/src/date-picker.scss";@import"~element-ui/packages/theme-chalk/src/time-select.scss";@import"~element-ui/packages/theme-chalk/src/time-picker.scss";@import"~element-ui/packages/theme-chalk/src/popover.scss";@import"~element-ui/packages/theme-chalk/src/tooltip.scss";@import"~element-ui/packages/theme-chalk/src/message-box.scss";@import"~element-ui/packages/theme-chalk/src/breadcrumb.scss";@import"~element-ui/packages/theme-chalk/src/breadcrumb-item.scss";@import"~element-ui/packages/theme-chalk/src/form.scss";@import"~element-ui/packages/theme-chalk/src/form-item.scss";@import"~element-ui/packages/theme-chalk/src/tabs.scss";@import"~element-ui/packages/theme-chalk/src/tab-pane.scss";@import"~element-ui/packages/theme-chalk/src/tag.scss";@import"~element-ui/packages/theme-chalk/src/tree.scss";@import"~element-ui/packages/theme-chalk/src/alert.scss";@import"~element-ui/packages/theme-chalk/src/notification.scss";@import"~element-ui/packages/theme-chalk/src/slider.scss";@import"~element-ui/packages/theme-chalk/src/loading.scss";@import"~element-ui/packages/theme-chalk/src/row.scss";@import"~element-ui/packages/theme-chalk/src/col.scss";@import"~element-ui/packages/theme-chalk/src/upload.scss";@import"~element-ui/packages/theme-chalk/src/progress.scss";@import"~element-ui/packages/theme-chalk/src/spinner.scss";@import"~element-ui/packages/theme-chalk/src/message.scss";@import"~element-ui/packages/theme-chalk/src/badge.scss";@import"~element-ui/packages/主题粉笔/src/card.scss";@import"~element-ui/packages/theme-chalk/src/rate.scss";@import"~element-ui/packages/theme-chalk/src/steps.scss";@import"~element-ui/packages/theme-chalk/src/step.scss";@import"~element-ui/packages/theme-chalk/src/carousel.scss";@import"~element-ui/packages/theme-chalk/src/scrollbar.scss";@import"~element-ui/packages/theme-chalk/src/carousel-item.scss";@import"~element-ui/packages/theme-chalk/src/collapse.scss";@import"~element-ui/packages/theme-chalk/src/collapse-item.scss";@import"~element-ui/packages/theme-chalk/src/cascader.scss";@import"~element-ui/packages/theme-chalk/src/color-picker.scss";@import"~element-ui/packages/theme-chalk/src/transfer.scss";@import"~element-ui/packages/theme-chalk/src/container.scss";@import"~element-ui/packages/theme-chalk/src/header.scss";@import"~element-ui/packages/theme-chalk/src/aside.scss";@import"~element-ui/packages/theme-chalk/src/main.scss";@import"~element-ui/packages/theme-chalk/src/footer.scss";@import"~element-ui/packages/theme-chalk/src/timeline.scss";@import"~element-ui/packages/theme-chalk/src/timeline-item.scss";@import"~element-ui/packages/theme-chalk/src/link.scss";@import"~element-ui/packages/theme-chalk/src/divider.scss";@import"~element-ui/packages/theme-chalk/src/image.scss";@import"~element-ui/packages/theme-chalk/src/calendar.scss";@import"~element-ui/packages/theme-chalk/src/backtop.scss";@import"~element-ui/packages/theme-chalk/src/infinite-scroll.scss";@import"~element-ui/packages/theme-chalk/src/page-header.scss";@import"~element-ui/packages/theme-chalk/src/cascader-panel.scss";@import"~element-ui/packages/theme-chalk/src/avatar.scss";@import"~element-ui/packages/theme-chalk/src/drawer.scss";@import"~element-ui/packages/theme-chalk/src/popconfirm.scss";参考第1条,https://github.com/ElemeFE/el...如有侵权请告知