webpack中引入css报错的原因

本文详细介绍了在使用Webpack 2.4.1版本时遇到的CSS加载错误,并给出了正确的解决方案。作者通过具体示例展示了如何配置loader来正确加载CSS文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

webpack中引入css报错的原因

webpack版本号2.4.1

引入css
npm install css-loader style-loader

js引入css部分

require(“!style!css!./style.css”);

cmd报错信息

ERROR in ./style.css
Module parse failed: C:\webpack\app\style.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
| background: yellow;
| }
@ ./runoob1.js 1:0-22

正确引入css

require(“!style-loader!css-loader!./style.css”);

### Vue 项目引入外部 CSS 字体报错解决方案 当在 Vue 项目引入外部 CSS 字体时,可能会遇到诸如 `Failed to decode downloaded font` 的错误。这类问题通常由以下几个原因引起: #### 跨域资源共享 (CORS) 如果字体文件托管在一个不同的域名上,则浏览器会阻止这些资源的加载以防止跨站脚本攻击。为了克服这个问题,在本地 CDN 上存储所需的字体文件是一个有效的策略[^1]。 ```bash # 假设已将字体文件放置于 public/fonts 目录下 ``` 对于已经迁移到内部 CDN 或者本地服务中的静态资源,确保 Webpack 配置允许正确解析路径非常重要。可以通过调整 `publicPath` 设置来实现这一点。 #### 正确配置 Webpack 和 Vue CLI 确保 `.env` 文件或其他环境变量设置不会覆盖默认公共路径。例如: ```javascript // vue.config.js 中添加如下配置项 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-subpath/' : '/' }; ``` 另外,确认 `@import` 语句指向正确的相对或绝对 URL 地址。比如: ```css /* 在 style 标签内 */ <style lang="scss"> @import './assets/css/font-awesome.min.css'; </style> ``` 或者通过 JavaScript 动态注入样式表链接节点至 HTML 文档头部: ```html <!-- index.html --> <head> ... <link rel="stylesheet" href="<%= BASE_URL %>static/styles/custom-fonts.css"/> ... </head> ``` #### 检查并修正 HTTP 请求头 有时即使解决了上述问题仍然无法正常显示自定义字体,这时应该检查实际发出的HTTP请求及其响应状态码和内容类型(Content-Type),确保它们符合预期。特别是 Content-Type 应该被设定为 `application/x-font-ttf`, `application/vnd.ms-opentype` 等适当值取决于所使用的具体字体格式[^4]。 #### 浏览器缓存清理 最后别忘了清除浏览器缓存以便看到最新的更改效果。某些情况下旧版本的资源可能仍会被客户端缓存下来从而掩盖了新部署后的改进成果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值