Element ui样式加载问题

最新推荐文章于 2023-10-22 10:47:21 发布
原创 最新推荐文章于 2023-10-22 10:47:21 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种优化Element UI样式加载的方法，避免了依赖外网链接导致的样式丢失风险。通过在main.js中本地引入样式文件，并配置webpack加载器确保打包后在服务器上的正确运行。

问题描述

样式引入

凡是link 引入的https://unpkg.com/element-ui/lib/theme-chalk/index.css
既然寄托在外网的链接上加载css样式，那么官网挂掉或者更新，很容易就样式不见了。

解决办法

哥们听我的，注释了吧
在这里插入图片描述
1.然后在main.js中引入

import ‘element-ui/lib/theme-chalk/index.css’

这样可以引用自己下载的本地插件样式。

然后，重点来了！

2.在此文件引用，这样是为了打包后在服务器上正确运行。
在这里插入图片描述

代码是：{ test: /\.css$/, loader: 'style-loader!css-loader', exclude: /node_modules/ },

为你解决了问题的话，请给个赞吧

网站快速成型工具-Element UI
weixin_48143996的博客
12-06 7124
Element UIElement UI1 什么是Element UI？？？？2 搭建环境2.1 创建vue项目2.2 安装 element-ui组件2.3 Element UI 引入3 布局3.1 布局3.2 reset.css3.3 满屏填充4 导航条4.1 需求4.2 导航条4.3 路由4.4 页面刷新导航选中问题5 表格：查询列表5.1 测试页面5.2 基本表格5.3 表格修饰5.4 多选![在这里插入图片描述](https://img-blog.csdnimg.cn/87a16b32f4a447e
Element UI主题样式文件
04-07
为了优化性能，Element UI 允许开发者按需引入组件，避免加载未使用的样式。这可以通过配置 babel-plugin-import 插件来实现，确保只导入项目中实际用到的组件样式。 6. **深色模式**： 如今许多应用支持深色模式...
VUE-GET https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css net::ERR_CONNECTION_REFUSED
superlee
12-17 1万+
问题：部署在阿里云的项目突然间访问异常，页面非阿里云本地访问不到？ 显示错误如下： GET https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css net::ERR_CONNECTION_REFUSED 发现网络访问不到此css样式 但是在阿里云上可以正常访问该远程样式。 解决方法1：在阿里云上将这个css下载下来，改成本地文件访问； 解决方法2：使用 unpkg.com 的国内镜像地址： unpkg.zhimg.com 唉 费事，最后附
GET https://unpkg.com/element-ui/lib/theme-chalk/index.css net::ERR_CONNECTION_REFUSED
LJJONESEED的博客
10-12 2089
2.下载文件，根据路径引入即可。
elementui样式不生效
ANNENBERG的博客
08-25 1509
在main.js中引入js和css样式 挂载为vue的插件,如果这几步都没有问题,但是element的样式还是不显示!可以看一下vue.config.js文件中的css配置项,改成true。
element-ui的样式加载不出来
moon_lightxumu的博客
12-09 2286
element-ui样式加载不出来
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
10-17
主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
精选资源
【基于element ui的color选择器】基于element ui的color选择器项目源码
05-08
它帮助构建工具（如Autoprefixer）自动为不同浏览器添加必要的CSS vendor prefixes，确保样式在各种浏览器间兼容。 2. `.env.dev` 和 `.env`：这些是环境变量配置文件，`.env.dev` 用于开发环境，`.env` 通常用于...
精选资源
element-ui资源包
08-03
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，以便快速构建美观、响应式的用户界面。这个"element-ui资源包"包含了所有你需要在前端项目中使用 Element UI 的必要文件和资源。 ...
详解修改Element UI el-select组件样式：popper-append-to-body与popper-class
最新发布
07-09
在使用 Element UI 的 el-select 组件时，很多开发者想要修改其样式，网上常见的方法有以下几种：一是通过查找下拉框的类名，然后编写全局样式覆盖默认样式；二是直接修改 .el-select-dropdown__item 的样式；三是...
text html mime img,css,spring_样式表单未载入，因为它的MIME类型 "text/html" 不是 "text/css"。，css,spring - phpStudy...
weixin_34717586的博客
06-28 937
样式表单未载入，因为它的MIME类型 "text/html" 不是 "text/css"。火狐：样式表单 http://localhost:8080/login 未载入，因为它的MIME类型 "text/html" 不是 "text/css"。谷歌：Resource interpreted as Stylesheet but transferred with MIME type text/html...
localhost无法显示css样式,输入http://localhost:8080/admin/login,样式无法加载
weixin_30297493的博客
08-03 3226
前端代码直接用源代码的没有动，后端代码再最后，输入http://localhost:8080/admin/login，显示如下错误Refused to apply style from 'http://localhost:8080/static/css/admin/login-style.css' because its MIME type ('application/json') is not ...
解决：elementUi 样式不显示（请大佬们指点一二）
奥利波德的魔法屋
10-15 9493
背景 在使用vue+elementUi时，表单样式元素不显示，但是下面表格样式却是显示的。 问题： elementui css样式没有在vue作用域中，所以没有显示样式 解决 将该css移入到 vue的作用域中，即可 存在疑惑 请大佬，能否指点一下？为什么会出现这个情况，只是因为elementui基于vue的组件，所以在必须在vue的作用域吗？ 参考： https://www.cnblog...
从头写vue-解决element-ui样式不显示的问题
jessicafan0124的博客
11-30 1322
Element-UI样式不显示的问题错误样式显示解决方法正确样式 错误样式显示 代码使用了Element-UI的Side Bar，可以看到样式未显示 解决方法 安装主题生成工具，安装主题 > npm install element-them -g > npm install element-theme-chalk D 在main.js中进行引入 import ElementUI from 'element-UI' import 'element-them-chalk' 正确样式 ...
样式表单 /easyui.css 未载入,因为它的MIME类型 "text/html" 不是 "text/css"
热门推荐
fmwind的专栏
06-12 1万+
default*.cssdefault*.jsdefault*.jsondefault*.gifdefault*.pngdefault*.jpgdefault*.icodefault*.docdefault*.xlsdefault*.docxdefault*.xlsxdefault*.txtdefault*.swf
elementui样式不生效问题
lilikk1314的博客
09-18 1902
//下载elementui npm i element-ui -S // 在main.js 中引入 Element import ElementUI from 'element-ui' // 在main.js 引入 Element 样式 import 'element-ui/lib/theme-chalk/index.css' // 将 Element 挂载为 Vue 的插件 Vue.use(ElementUI); 下载elementui,在main.js中引入js和css样式 挂载为vue的.
vue学习-element-ui全部导入与按需加载
gaogzhen的博客
06-26 3752
vue学习-element-ui全部导入与按需加载 目录 文章目录1、版本简介1、element-ui安装2、全部导入3、按需加载4、全部导入与按需加载比较***后记*** ： 内容 1、版本简介 版本 简介 @vue/cli 4.0.5 vue脚手架，搭建vue项目 vue 2.6.11 vue框架核心 element-ui 2.13.2 UI框架 babel-plugin-component 1.1.1 element-ui按需加载组件 1、element-u
vue3 使用 elementUi： ./lib/theme-chalk/index.css is not exported from package
m0_54355172的博客
10-22 4364
日常贴
Vue2使用element-ui引入自定义主题的方法（使用在线主题生成工具）
weixin_51141523的博客
08-21 2931
引入element-ui之后，不喜欢默认蓝色主题，想换成自定义颜色主题，但官方文档，可能写得不够清晰，这里简单说说我是如何使用在线主题生成工具，然后引入自定义主题的
掌握Element UI样式主题切换技巧
通过更换主题样式文件，开发者可以轻松地将Element UI的界面风格从默认样式转换为符合项目品牌或设计要求的定制样式。" 以下是对Element UI主题样式文件更详细的知识点解析： 1. Element UI框架介绍： Element UI...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值