ERROR in ./src/css/demo.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/

最新推荐文章于 2024-07-22 17:17:36 发布
最新推荐文章于 2024-07-22 17:17:36 发布
阅读量1.5k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： webpack 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_60622481/article/details/125806461

今天在玩webpack的时候出现的错误

 

 我的less-loader版本太高了、真闹挺

npm uninstall  less-loader -D  --legacy-peer-deps  

npm install  less-loader@5.0.0 -D  --legacy-peer-deps

 

 好用了

ruoyi-nbcio版本从RuoYi-Flowable-Plus迁移过程记录
宁波阿成的博客
10-25 919
ruoyi-nbcio版本从RuoYi-Flowable-Plus迁移过程记录
前端框架-Vue.js语法
aming小老弟
10-11 599
父组件中的 handleUpdateChildValue 方法接收到参数后，将其设置为 childValue 变量的值，从而完成了子组件向父组件传递数据的过程。当我们需要对发布到线上的文件进行修改时，重新编译的文件名如果和之前版本的相同会引起浏览器无法识别而加载缓存文件的问题。注意： vue组件中的全部html都存在于一个块元素中，就是app.vue中的 id名字为app的div。Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。对状态的派生和缓存。
ERROR in ./src/index.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/c
zm_miner的博客
02-02 1万+
当我把所有资源都放在src下面的时候, 执行npx webpack-dev-server打包成功, 当划分js, css, imgs 文件夹以后, 报错 ERROR in ./src/index.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!./src/index.less) Module build failed (from ../node_modules/less-loader.
ERROR in ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/css/spec
qq_56729782的博客
06-26 3215
高版本的不兼容低版本的.添加如下版本或者低版本 npm install --save-dev less-loader@3.0.0 less (添加less 这个低版本)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
PigBiBiX的博客
04-14 5169
css-loader 版本过高，切换版本 npm install--save-dev css-loader@2.1.0
webpack 错误 Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
热门推荐
马金波
08-30 4万+
npm run build > webpack_test@1.0.0 build /home/q/www/webpack_test > webpack Hash: e5a0c99f86239b7fee98 Version: webpack 4.39.3 Time: 345ms Built at: 08/30/2019 7:13:18 PM 1 asset Entrypoint a...
Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError
weixin_41990299的博客
11-06 1835
记录配置 Webpack 时遇到的一个百思不得其解的报错：Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError 在看到这个问题以后，我第一时间去 reset.css 中查看语法是否有误；结果是没有任何错误。 在确定 css 文件无误以后，我把配置规则中的 css-loader 配置移除，...
找不到node_modules/node-sass/vendor目标的解决办法
程裕强的专栏
05-20 2515
npm i命令执行成功 但是npm run 命令时出错： no such file or directory, scandir ‘/app/admin/node_modules/node-sass/vendor’ ERROR in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ddeafd5","scoped":false
webpack源码解析三
vv_bug
07-09 2656
前言 前面写了一篇文章webpack源码解析一梳理了一遍webpack的编译过程，今天我们结合demo来过一遍webpack的所有配置项。 开始 为了更好的了解每一个选项的用法我们首先clone一份webpack的源码（demo用的是5.0.0-beta.7版本）： git clone https://github.com/webpack/webpack.git 源码clone完毕后在当前页面执行setup操作并且安装webpack-cli： yarn setup && yarn add
Webpack: Loader开发 (1)
Wang的专栏
07-02 1958
如何扩展 Webpack？有两种主流方式，一是 Loader —— 主要负责将资源内容翻译成 Webpack 能够理解、处理的 JavaScript 代码；二是 Plugin —— 深度介入 Webpack 构建过程，重塑构建逻辑。相对而言，Loader 的职责更单一，入门成本相对较低。我们关注以下的基础Loader 的基本形态与输入输出如何使用 Loader Context 上下文接口，并结合一些知名开源项目展开介绍部分常用接口如何为 Loader 编写自动测试代码。
Module build failed:(from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError
qq_25117449的博客
11-19 1万+
webpack配置 在自定义配置webpack的时候，遇到一个问题，报错如下 ERROR in ./src/test.css Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError (1:1) Unknown word 1 | var content = require("!!./...
(./node_modules/_css-loader@3.4.2@css-loader/dist/cjs.js!./node_modules/_vue-loader@15.8.3@vue-loade
seamull的专栏
01-17 4210
{ test: /\.stylus$/, use: [ 'vue-style-loader', 'css-loader', 'stylus-loader', //这个放到最后就没有上面的错误了 { loader: 'postcss-loader', options: { sourceMap: true } }, ] }, ...
scss|sass使用/deep/报错 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError
肥晨开发的学习之路
04-04 1309
scss不支持这个选择器。/deep/ 变:deep。
解决“Module build failed (from ./node_modules/sass-loader/dist/cjs.js)“错误
理论都是虚的，代码才是王道。
10-18 2万+
如果你在使用Node.js和Sass时遇到了"Module build failed (from ./node_modules/sass-loader/dist/cjs.js)"的错误，不要担心，这篇技术指南将详细介绍这个问题，并提供解决办法。首先，让我们深入了解这个错误。
ERROR in ./src/components/datePicker/index.less (./node_modules/css-loader/dist/cjs.js!./node_module
qq_60754128的博客
07-22 402
报错信息如下：报错原因是项目中less-loader版本过高导致，将其降低到5.0即可，注意安装的时候将项目中的package-lock.json文件夹删除。
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-5-1!./node_modules/postcss-loader/src??postcss!
weixin_45204463的博客
10-13 3459
安装less 完成后启动报错 执行如下两个命令 yarn remove less-loader yarn add less-loader@5.0.0 执行完这个两个就解决啦
Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can‘t find stylesheet
qq_36987708的博客
03-23 8808
把angular项目从git拉去下拉后，通过npm install @angular/cli@9.1.12安装项目的node_module后，再通过ng serve启动项目时一直报错 报错信息如下： ERROR in ./src/assets/custom-bootstrap-utilities.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node
webpack 配置 style-loader时出现错误：Module build failed (from ../node_modules/style-loader/dist/cjs.js)
你是我修复不了的bug，但我会用一生去维护
12-01 4012
webpack 配置 style-loader时出现错误，Module build failed (from …/node_modules/style-loader/dist/cjs.js):TypeError: this.getOptions is not a function at Object.loader 1.确保loader配置中的顺序，loader的执行顺序是从右到左，从下到上的，这里要注意 style-loader 和css-loader的顺序 ，style-loader 要放在前面 2. 使
./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!
weixin_44331330的博客
03-26 1万+
npm run build打包报错
ERROR Failed to compile with 2 errors 下午4:36:10 These relative modules were not found: * ./fonts/element-icons.ttf in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/element-variables.scss * ./fonts/element-icons.woff in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/element-variables.scss
最新发布
06-26
<think>我们正在解决一个关于CSS加载字体文件时出现的模块未找到错误。错误信息如下："Theserelativemoduleswerenotfound:./fonts/element-icons.ttfin..../fonts/element-icons.woffin..."根据错误信息，问题在于在构建过程中，webpack（通过css-loader）无法找到位于相对路径`./fonts/`下的字体文件（.ttf和.woff文件）。###问题分析1.**路径问题**：通常，当使用相对路径引用资源时，需要确保资源文件存在于指定的路径中。在这个例子中，webpack期望在`./fonts/`目录下找到`element-icons.ttf`和`element-icons.woff`文件。但是，这些文件可能不存在，或者路径配置不正确。2.**构建工具配置**：构建工具（如webpack）需要正确配置以处理字体文件。如果配置中缺少对字体文件的处理规则，或者规则配置不正确，也会导致此类错误。###解决方案####步骤1:确认字体文件是否存在首先，检查你的项目目录中是否存在`fonts`文件夹，并且该文件夹下包含`element-icons.ttf`和`element-icons.woff`文件。如果不存在，你需要获取这些字体文件。它们通常来自于某个UI库（如element-ui或element-plus）。你可以尝试重新安装相关npm包，或者从官方资源中复制这些文件。####步骤2:检查文件路径引用在CSS文件中，检查对字体文件的引用路径是否正确。例如，在`element-plus/dist/index.css`中，可能包含类似以下的代码：```css@font-face{src:url('./fonts/element-icons.woff')format('woff'),url('./fonts/element-icons.ttf')format('truetype');}```如果实际字体文件位于其他目录，你需要调整路径，或者调整构建配置。####步骤3:配置webpack处理字体文件在webpack配置中，你需要确保有规则来处理字体文件。通常，使用`file-loader`或`url-loader`来处理字体文件。以下是一个配置示例：```javascriptmodule.exports={module:{rules:[{test:/\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,use:[{loader:'file-loader',options:{name:'[name].[ext]',outputPath:'fonts/'//输出到输出目录下的fonts文件夹}}]}]}};```####步骤4:检查构建环境中的路径问题如果项目结构复杂，或者使用了多个配置，可能需要调整publicPath或使用绝对路径。在webpack配置中，可以设置`publicPath`来解决路径问题。####步骤5:更新依赖或检查版本冲突有时，这类问题可能是由于版本不兼容导致的。检查相关npm包的版本（如element-plus,css-loader,file-loader等），并尝试更新到最新版本，或者查看是否有已知的问题。###参考信息根据引用[^1]，错误信息直接指出了找不到的字体文件路径。而引用[^3]提到了字体自定义工具fontcustom，它可以从矢量图标生成字体，但这里的问题可能是由于缺少字体文件或路径配置错误。###总结解决此类问题的关键是：1.确保字体文件存在于正确的位置。2.配置webpack（或其他构建工具）正确处理字体文件。如果按照上述步骤操作，应该能够解决字体文件找不到的问题。§§相关问题§§1.如何正确配置webpack来处理字体文件？2.在Vue项目中，如何解决静态资源（如图片、字体）加载失败的问题？3.使用element-ui或element-plus时，如何自定义图标字体？</think>### 解决CSS加载字体文件的模块未找到错误 根据错误信息 `These relative modules were not found: ./fonts/element-icons.ttf and .woff in css-loader environment`，这是Webpack构建过程中常见的资源路径问题。以下是系统化的解决方案： --- #### **1. 验证字体文件物理存在** ```bash 项目根目录/ ├── public/ │ └── fonts/ # 推荐存放位置 │ ├── element-icons.ttf │ └── element-icons.woff └── src/ └── assets/ └── fonts/ # 备选存放位置 ``` > ⚠️ 如果文件不存在： > - 从 `node_modules/element-plus/lib/theme-chalk/fonts/` 复制字体文件 > - 或重新安装依赖：`npm install element-plus@latest` --- #### **2. 修改Webpack配置 (vue.config.js)** ```javascript // vue.config.js module.exports = { chainWebpack: config => { config.module .rule('fonts') .test(/\.(woff|ttf)$/) .use('url-loader') .loader('url-loader') .tap(options => ({ ...options, name: 'fonts/[name].[hash:8].[ext]', // 确保输出路径正确 publicPath: process.env.NODE_ENV === 'production' ? '../fonts/' // 生产环境路径 : '/fonts/' // 开发环境路径 })) } } ``` --- #### **3. 检查CSS引用路径** 在 `element-plus/dist/index.css` 中找到字体声明： ```css /* 修改前 */ @font-face { src: url('./fonts/element-icons.woff'); /* 相对路径错误 */ } /* 修改后 */ @font-face { src: url('~@/assets/fonts/element-icons.woff'); /* 使用别名 */ } ``` > 💡 使用Webpack别名： > - `@` 指向 `src/` 目录 > - `~` 表示从node_modules解析 --- #### **4. 版本兼容性处理** 若使用Element Plus： ```bash npm install element-plus@^2.3.0 css-loader@^6.0.0 file-loader@^6.0.0 ``` > 注意：gulp4.x语法变化需调整构建脚本[^4] --- #### **5. 清理缓存重建** ```bash # 清理缓存 rm -rf node_modules/.cache rm -rf dist # 重新安装并构建 npm install npm run build ``` --- ### 根本原因分析 问题通常由以下原因导致： 1. **路径映射错误**：Webpack无法解析CSS中的相对路径 2. **构建配置缺失**：未正确处理字体文件的loader配置 3. **版本冲突**：Element UI/Plus与构建工具版本不兼容 4. **文件缺失**：字体文件未包含在项目中 > 引用参考：此类路径问题常见于CSS加载器处理静态资源时[^1][^3]，建议使用绝对路径或Webpack别名避免相对路径陷阱。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值