./src/assets/scss/index.scss (./node_modules/css-loader/dist/cjs.js??ref--8的另一种情况

已于 2024-05-14 12:09:26 修改
阅读量470 收藏
点赞数 3
文章标签： vue.js
于 2024-05-14 12:04:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinyuheng/article/details/138848638
版权

关于报错postcss-loader
关键是上面还有ref-8这样的错误

./src/assets/scss/index.scss (./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/scss/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

有人就会想自己的sass 、sass-loader安装包不匹配其实错误是下面的postcss-loader没有安装这种情况也有可能
我查看自己的环境匹配关于sass的觉得没有问题
在这里插入图片描述

在这里插入图片描述
最后安装包输入指令
npm install postcss-loader@2.1.6
项目顺利运行
在这里插入图片描述

xinyuheng
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css import 使用 webpack 配置的alias 相对路径
m0_37922914的博客
05-15 841
问题背景 webpack中定义alias相信很多人都知道，在引入文件的时候比较方便不需要写冗长的引用地址，在webpack里定义这个： resolve: { alias: { '@': path.resolve(__dirname, 'src/') } } 则引入文件时 @ 则表示src目录 然后在使用import导入css文件时，使用alias`定义的地址简写却出现问题 * -!../../../node_modules/css-loader/dist/
src/assets/js/ezuikit.js
06-09
src/assets/js/ezuikit.js
./src/styles/index.scss 模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuil
肖肖肖丽珠的博客
03-11 4361
./src/styles/index.scss 模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）： 错误：Node Sass 版本 7.0.1 与 ^4.0.0 不兼容 package.json "node-sass": "^5.0.0", "sass-loader": "^...
Vue项目启动和常见错误
赵广陆
01-16 5601
目录 1 安装node环境 2 安装taobao的npm镜像 3 Vue项目 4 前台开发工具 5 安装依赖： 6 修改路径和地址 7 常见错误: 7.1 cnpm报错 7.2concurrently不是内部或外部命令 7.3 Failed to compile scss 无法编译scss 1 安装node环境 后端人员:没办法虽然前后端分离不用管前端这些东西,但是启动测试还是要会的,虽然postman可以测试返回数据和发送前端数据,但是最终还是要落在和前端页面交互.以后遇到...
记录vue-cil安装scss时遇到的问题
weixin_37365539的博客
02-14 3219
执行npm install scss安装scss,但是报错 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“vue”:true,“id”:“data-v-7ba5bd90”,“scoped”:false,“hasInlineConfig”:false}!./node_modules/sass-loader/
Vue 报错 之 Syntax Error: TypeError: this.getOptions is not a function
热门推荐
仙魁XAN
10-29 2万+
IntellJ IDEA 基础之 创建 SpringBoot 整合 SSM 框架的 Maven 工程简单整理 目录 IntellJ IDEA 基础之 创建 SpringBoot 整合 SSM 框架的 Maven 工程简单整理 一、简单介绍 二、报错现象 三、问题分析 四、问题处理 一、简单介绍 Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。 本节介绍，Vue 运行时报错 Syntax Error: TypeError: this.getOptions ...
sass-loader高版本传入全局变量的错误
weixin_51116314的博客
07-05 1251
问题 npm run serve打开vue项目就出现这样的问题。 因为使用了sass。 在vue.config.js中配置了 module.exports = { css: { loaderOptions: { sass: { additionalData: ` @import "@/assets/scss/variable.scss"; @import "@/assets/scss/mixin.scss";
my_html_js_www.my.html/_象棋_
09-29
2. JavaScript文件：除了可能的`main.js`外，还可能有其他文件如`gameLogic.js`（处理游戏规则和AI）、`ui.js`（处理用户界面交互）等。 3. CSS文件：如`style.css`，用于定义游戏界面的样式和布局。 4. 图片资源：...
21.（vue3.x+vite）使用scss.rar
最新发布
11-15
Vue3.x 和 Vite 结合使用 SCSS 是现代前端开发中的常见实践，这允许开发者利用 SCSS 的强大功能来组织和美化 CSS。本教程将详细解释如何在 Vue3.x 项目中配置和应用 SCSS。 首先，Vue3.x 是 Vue.js 框架的最新版本...
we.dog-master_spider_twrj.vip_http://master.we_舔王日记_tianwangriji
10-03
这个程序也是我原先在某个网站上下载的，自己修改了一点。重新设计，好不好看你自己看；...字体源文件：/assets/font/.font-spider/；文字承载页：/assets/font/index.html。纯静态，没时间搞动态。
Gallary3D.rar_JavaScript/JQuery_Java_
08-11
5. "src"：源代码目录，通常包含Java和/或JavaScript文件。 6. "res"：资源文件夹，包含了应用的图片、布局、字符串等资源。 7. ".settings"：这是Eclipse项目特定的设置文件夹。 8. "assets"：在Android中，此...
npm run启动时报错
qq_45664048的博客
11-19 2432
使用npm run dev 运行，出现如下错误 ： Failed to compile. ./src/styles/index.scss (./node_modules/css-loader??ref–11-1!./node_modules/postcss-loader/lib??ref–11-2!./node_modules/sass-loader/lib/loader.js??ref–11-3!./src/styles/index.scss) Module build failed (from ./no
Webpack基础应用篇 -[9]管理资源(下)
sdasadasds的博客
01-14 805
1.6.4 加载 images 图像 假如，现在我们正在下载 CSS，但是像 background 和 icon 这样的图像，要如何处理呢？在 webpack 5 中，可以使用内置的 Asset Modules，我们可以轻松地将这些内容混入我们的系统中，这个我们在"资源模块"一节中已经介绍了。这里再补充一个知识点，在 css文件里也可以直接引用文件，修改 style.css 和入口 index.js： .block-bg { background-image: url(./assets/webpack-
Vue中引入使用scss变量报错：./node_modules/vue-style-loader!./node_modules/css-loader?
艾丽的博客
07-15 6129
1.第一种情况： 这是由于css解析的时候出了问题，解决方案为：https://blog.csdn.net/dt1991524/article/details/83413211 2. 第二种情况（自己遇到的）： 样式文件的引入方式导致 <style lang="scss" scoped> @import "../styles/index.scss"; // 这种引入正确 // @import url(../styles/index.scss); // 这种方式引入报错 </style&g.
两个参考链接
weixin_40945354的博客
02-20 385
https://blog.csdn.net/sinat_40697723/article/details/106036056 https://www.jianshu.com/p/4078b69f5861 没实现了，一直报错，想尽办法，也无果。
npm run dev报错node sass does not yet
feilzhang的博客
07-27 415
vue运行的时候报错解决
Vue 项目安装 scss 以及报错的解决方法 --- Window10 系统 和 Mac OS 系统
qq_43477721的博客
02-28 6241
1.安装sass依赖 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 如果运行之后项目报错 Module build failed: TypeError: this.getResolve is not a function at Object.loa...
vue项目安装scss常见报错处理
晓光同学的博客
08-12 6291
1. 安装sass依赖 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 第一种：Module build failed: TypeError: this.getResolve is not a function 如果运行之后项目报错 Module build failed: TypeError: this.getResolve is not a functi
in ./src/components/vixData/vixAllData.vue?vue&type=style&index=0&id=3fbe4e94&scoped=true&lang=css& Module not found: Error: Can't resolve './src/assets/font/Fette-Engschrift.ttf' in '/Users/xsjtkai/WebstormProjects/vue-echarts/vue_echarts/src/components/vixData' ERROR in ./src/components/vixData/vixAllData.vue?vue&type=style&index=0&id=3fbe4e94&scoped=true&lang=css& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/vixData/vixAllData.vue?vue&type=style&index=0&id=3fbe4e94&scoped=true&lang=css&) 5:36-102 Module not found: Error: Can't resolve './src/assets/font/Fette-Engschrift.ttf' in '/Users/xsjtkai/WebstormProjects/vue-echarts/vue_echarts/src/components/vixData' @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/vixData/vixAllData.vue?vue&type=style&index=0&id=3fbe4e94&scoped=true&lang=css& 4:14-392 15:3-20:5 16:22-400 @ ./src/components/vixData/vixAllData.vue?vue&type=style&index=0&id=3fbe4e94&scoped=true&lang=css& 1:0-456 1:0-456 @ ./src/components/vixData/vixAllData.vue 4:0-94 @ ./src/router/index.js 16:0-57 33:13-23 @ ./src/main.js 3:0-30 26:2-8
06-08
根据错误提示，字体文件 `Fette-Engschrift.ttf` 在路径 `./src/assets/font/Fette-Engschrift.ttf` 中未找到。请检查以下几点： 1. 确认字体文件确实位于 `./src/assets/font/` 目录下。 2. 确认您在引用字体文件时使用的相对路径是正确的，即确保路径与字体文件的实际路径相匹配。 3. 确认您的 Webpack 配置中是否有正确的 loader 配置来处理字体文件。在 Vue CLI 3 项目中，默认的 Webpack 配置应该已经包含了处理字体文件的 loader。 如果您仍然无法解决问题，请提供更多的错误信息和代码片段，以便我更好地帮助您。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值