node-sass替换成Dart-sass(全是坑)

news2025/3/17 8:07:49

 改了好久,人都改傻了,我是用的node:14.21.3,vue:2.5.2,webpack": "^3.12.0"
还好最后成功了,不然还准备要升级webpack版本试试,但/deep/换成::v-deep,人要死,样式都不行了,要一个个改

//主要这几个部分

"node-sass": "^4.12.1", //去掉
"sass": "^1.23.7", // 新增

"vue-loader": "^13.3.0", // 去掉,因为版本太低,导致js栈内存不足,会出现编译构建卡死,最后报如下错误
"vue-loader": "^13.7.3", // 新增

/** 13 verbose stack Exit status 134
13 verbose stack     at EventEmitter.<anonymous> (D:\nvm\v14.21.3\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (D:\nvm\v14.21.3\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1088:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
14 verbose pkgid ky-vueui@1.0.6611799992828
15 verbose cwd D:\kayiProject\hidos-ris-web
16 verbose Windows_NT 10.0.19045 */

// 搜索结果它会说js栈内存不足,建议扩大node内存
// 它推荐node --max-old-space-size=4096,还要修改全部node_modules下的.bin文件夹下的/cmd文件修改"%_prog%",去掉双引号%_prog%
// 这方案看着就不靠谱,但为了项目,我忍了,为此还写了一个node脚本来执行

// 然而效果并不理想,还是不行
// 后来发现是vue-loader版本问题,特地试了好几个

// 最后找到"vue-loader": "^13.7.3" ,这个可以



修改前package.json

{
	"name": "ky-vueui",
	"version": "1.0.6611799992828",
	"description": "A Vue.js project",
	"author": "YEZQ <497070595@qq.com>",
	"private": true,
	"scripts": {
		"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
		"start": "npm run dev",
		"build": "node build/build.js",
		"build-dev": "npm run version && node build/build.js",
		"build-deploy": "npm run build && node build/deploy.js",
		"version": "node build/updateVersion.js",
		"dll": "webpack -p --progress --config build/webpack.dll.conf.js",
		"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
		"test": "jest --config test/unit/jest.conf.js"
	},
	"dependencies": {
		"@babel/runtime": "^7.15.3",
		"@tinymce/tinymce-vue": "^3.2.8",
		"awe-dnd": "^0.3.4",
		"axios": "^0.19.2",
		"babel-polyfill": "^6.26.0",
		"crypto-js": "^4.0.0",
		"diff": "^5.1.0",
		"dingtalk-jsapi": "^2.12.2",
		"element-ui": "^2.15.6",
		"eventsource": "^2.0.2",
		"file-saver": "^2.0.5",
		"font-awesome": "^4.7.0",
		"html2canvas": "^1.4.1",
		"jquery": "^3.7.1",
		"js-cookie": "^2.2.1",
		"jspdf": "^2.5.2",
		"jspdf-autotable": "^3.8.4",
		"normalize.css": "^8.0.1",
		"path-to-regexp": "^6.2.2",
		"pdfjs-dist": "^2.5.207",
		"qrcode": "^1.4.4",
		"qrcodejs2": "0.0.2",
		"sm-crypto": "^0.3.13",
		"sortablejs": "^1.10.2",
		"spark-md5": "^3.0.2",
		"svg-sprite-loader": "^4.2.1",
		"svgo": "^1.3.2",
		"tinymce": "^5.1.0",
		"v-runtime-template": "^1.10.0",
		"vue": "^2.5.2",
		"vue-cropper": "^0.5.6",
		"vue-hot-reload-api": "^2.3.4",
		"vue-router": "^3.0.1",
		"vue-simple-uploader": "^0.7.4",
		"vue-slicksort": "^1.1.3",
		"vue-splitpane": "^1.0.6",
		"vue-visibility-change": "^1.2.1",
		"vuedraggable": "^2.23.2",
		"vuex": "^3.1.3",
		"ws": "^8.17.0",
		"xlsx": "^0.18.5"
	},
	"devDependencies": {
		"@vue/test-utils": "^1.2.2",
		"autoprefixer": "^7.1.2",
		"babel-core": "6.22.1",
		"babel-eslint": "7.2.3",
		"babel-helper-vue-jsx-merge-props": "2.0.3",
		"babel-jest": "^23.6.0",
		"babel-loader": "7.1.1",
		"babel-plugin-dynamic-import-node": "1.2.0",
		"babel-plugin-syntax-jsx": "6.18.0",
		"babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
		"babel-plugin-transform-runtime": "6.22.0",
		"babel-plugin-transform-vue-jsx": "3.5.0",
		"babel-preset-env": "1.3.2",
		"babel-preset-stage-2": "6.22.0",
		"chalk": "^2.0.1",
		"compressing": "^1.9.0",
		"copy-webpack-plugin": "^4.0.1",
		"css-loader": "^0.28.0",
		"eslint": "^6.8.0",
		"eslint-config-airbnb-base": "^14.1.0",
		"eslint-config-kayieslint": "^0.1.1",
		"eslint-friendly-formatter": "^4.0.1",
		"eslint-loader": "^4.0.0",
		"eslint-plugin-import": "^2.20.2",
		"eslint-plugin-template": "^0.7.0",
		"eslint-plugin-vue": "^6.2.2",
		"extract-text-webpack-plugin": "^3.0.0",
		"file-loader": "^1.1.4",
		"friendly-errors-webpack-plugin": "^1.6.1",
		"html-webpack-plugin": "^2.30.1",
		"jest": "^23.6.0",
		"node-notifier": "^5.1.2",
		"node-sass": "^4.12.1",
		"optimize-css-assets-webpack-plugin": "^3.2.0",
		"ora": "^1.2.0",
		"portfinder": "^1.0.13",
		"postcss-import": "^11.0.0",
		"postcss-loader": "^2.0.8",
		"postcss-url": "^7.2.1",
		"rimraf": "^2.6.0",
		"sass-loader": "^7.3.1",
		"semver": "^5.3.0",
		"shelljs": "^0.7.6",
		"ssh2": "^0.6.2",
		"uglifyjs-webpack-plugin": "^1.1.1",
		"url-loader": "^0.5.8",
		"vue-jest": "^3.0.0",
		"vue-loader": "^13.3.0",
		"vue-style-loader": "^3.0.1",
		"vue-template-compiler": "^2.5.2",
		"webpack": "^3.12.0",
		"webpack-bundle-analyzer": "^2.9.0",
		"webpack-cli": "^3.3.11",
		"webpack-dev-server": "^2.11.5",
		"webpack-merge": "^4.1.0"
	},
	"engines": {
		"node": ">= 6.0.0",
		"npm": ">= 3.0.0"
	},
	"browserslist": [
		"> 1%",
		"last 2 versions",
		"not ie <= 8"
	]
}

修改后

{
	"name": "ky-vueui",
	"version": "1.0.6611799992828",
	"description": "A Vue.js project",
	"author": "YEZQ <497070595@qq.com>",
	"private": true,
	"scripts": {
		"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
		"start": "npm run dev",
		"build": "node build/build.js",
		"build-dev": "npm run version && node build/build.js",
		"build-deploy": "npm run build && node build/deploy.js",
		"version": "node build/updateVersion.js",
		"dll": "webpack -p --progress --config build/webpack.dll.conf.js",
		"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
		"test": "jest --config test/unit/jest.conf.js"
	},
	"dependencies": {
		"@babel/runtime": "^7.15.3",
		"@tinymce/tinymce-vue": "^3.2.8",
		"awe-dnd": "^0.3.4",
		"axios": "^0.19.2",
		"babel-polyfill": "^6.26.0",
		"crypto-js": "^4.0.0",
		"diff": "^5.1.0",
		"dingtalk-jsapi": "^2.12.2",
		"element-ui": "^2.15.6",
		"eventsource": "^2.0.2",
		"file-saver": "^2.0.5",
		"font-awesome": "^4.7.0",
		"html2canvas": "^1.4.1",
		"jquery": "^3.7.1",
		"js-cookie": "^2.2.1",
		"jspdf": "^2.5.2",
		"jspdf-autotable": "^3.8.4",
		"normalize.css": "^8.0.1",
		"path-to-regexp": "^6.2.2",
		"pdfjs-dist": "^2.5.207",
		"qrcode": "^1.4.4",
		"qrcodejs2": "0.0.2",
		"sm-crypto": "^0.3.13",
		"sortablejs": "^1.10.2",
		"spark-md5": "^3.0.2",
		"style-loader": "^4.0.0",
		"svg-sprite-loader": "^4.2.1",
		"svgo": "^1.3.2",
		"tinymce": "^5.1.0",
		"v-runtime-template": "^1.10.0",
		"vue": "^2.5.2",
		"vue-cropper": "^0.5.6",
		"vue-hot-reload-api": "^2.3.4",
		"vue-router": "^3.0.1",
		"vue-simple-uploader": "^0.7.4",
		"vue-slicksort": "^1.1.3",
		"vue-splitpane": "^1.0.6",
		"vue-visibility-change": "^1.2.1",
		"vuedraggable": "^2.23.2",
		"vuex": "^3.1.3",
		"ws": "^8.17.0",
		"xlsx": "^0.18.5"
	},
	"devDependencies": {
		"@vue/test-utils": "^1.2.2",
		"autoprefixer": "^7.1.2",
		"babel-core": "6.22.1",
		"babel-eslint": "7.2.3",
		"babel-helper-vue-jsx-merge-props": "2.0.3",
		"babel-jest": "^23.6.0",
		"babel-loader": "7.1.1",
		"babel-plugin-dynamic-import-node": "1.2.0",
		"babel-plugin-syntax-jsx": "6.18.0",
		"babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
		"babel-plugin-transform-runtime": "6.22.0",
		"babel-plugin-transform-vue-jsx": "3.5.0",
		"babel-preset-env": "1.3.2",
		"babel-preset-stage-2": "6.22.0",
		"chalk": "^2.0.1",
		"compressing": "^1.9.0",
		"copy-webpack-plugin": "^4.0.1",
		"css-loader": "^0.28.0",
		"eslint": "^6.8.0",
		"eslint-config-airbnb-base": "^14.1.0",
		"eslint-config-kayieslint": "^0.1.1",
		"eslint-friendly-formatter": "^4.0.1",
		"eslint-loader": "^4.0.0",
		"eslint-plugin-import": "^2.20.2",
		"eslint-plugin-template": "^0.7.0",
		"eslint-plugin-vue": "^6.2.2",
		"extract-text-webpack-plugin": "^3.0.0",
		"fibers": "^5.0.3",
		"file-loader": "^1.1.4",
		"friendly-errors-webpack-plugin": "^1.6.1",
		"html-webpack-plugin": "^2.30.1",
		"jest": "^23.6.0",
		"node-notifier": "^5.1.2",
		"optimize-css-assets-webpack-plugin": "^3.2.0",
		"ora": "^1.2.0",
		"portfinder": "^1.0.13",
		"postcss-import": "^11.0.0",
		"postcss-loader": "^2.0.8",
		"postcss-url": "^7.2.1",
		"rimraf": "^2.6.0",
		"sass": "^1.23.7",
		"sass-loader": "^7.3.1",
		"semver": "^5.3.0",
		"shelljs": "^0.7.6",
		"ssh2": "^0.6.2",
		"uglifyjs-webpack-plugin": "^1.1.1",
		"url-loader": "^0.5.8",
		"vue-jest": "^3.0.0",
		"vue-loader": "^13.7.3",
		"vue-style-loader": "^3.0.1",
		"vue-template-compiler": "^2.5.2",
		"webpack": "^3.12.0",
		"webpack-bundle-analyzer": "^2.9.0",
		"webpack-cli": "^3.3.11",
		"webpack-dev-server": "^2.11.5",
		"webpack-merge": "^4.1.0"
	},
	"engines": {
		"node": ">= 6.0.0",
		"npm": ">= 3.0.0"
	},
	"browserslist": [
		"> 1%",
		"last 2 versions",
		"not ie <= 8"
	]
}

 webpack配置增加sass的配置

{
        test: /\.(scss|sass)$/,
        exclude: /node_modules|\.js$/, // 排除 node_modules 和所有 JS 文件
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader', // 新增 PostCSS 处理层
            options: {
              sourceMap: false
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'), // 使用 Dart Sass
              sassOptions: {
                fiber: false // Node.js 16+ 无需此配置
              },
              // fiber: require('fibers'),         // 安装 fibers 后启用
              // sassOptions: { outputStyle: 'expanded',indentedSyntax: false }, // 添加输出格式
              // sourceMap: false, // 关闭 Source Map
              additionalData: async (content, loaderContext) => {
                return content.replaceAll('/deep/', '::v-deep');
              },
            }
          }
        ],
      },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2316505.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2025中国科技大学少年班/创新试点班·初试备考测试卷(数学)

本卷考查内容&#xff1a;高中课程内容及拓展。 本卷考查形式&#xff1a;书面作答&#xff08;客观题18小题解答题4题&#xff09;。 卷首语&#xff1a;中科大少年班、创新班每年大规模招录在数理成绩优异的中学学生。其中初试数学题在高考基础上略有拓展&#xff0c;难度又低…

即时通讯平台测试报告

1.项目概述 项目名称&#xff1a;即时通讯平台 版本号&#xff1a;V1.0.0 测试周期&#xff1a;2025年2月25日--2025年3月15日 测试目标&#xff1a;验证核心功能&#xff08;登录、注册、消息收发、用户管理、群组功能等&#xff09;的稳定性和性能指标。 2. 测试范围 功…

如何记录Matlab程序运行过程中所占用的最大内存

有些时候&#xff0c;我们需要分析Matlab程序运行过程中所占用的最大内存。如果只是得到程序运行到当前位置所占用的内存&#xff0c;可以简单在程序当前位置插入memory命令即可&#xff1a; user memory; MemUsed_now user.MemUsedMATLAB; 但如果我们想要的是整个程序在运行…

WIN11开发环境变量记录

这里写自定义目录标题 总图JAVA环境变量配置GIT环境变量配置NODEJS环境变量配置 总图 JAVA环境变量配置 新建系统变量。变量名&#xff1a;JAVA_HOME&#xff0c;变量值&#xff08;可以选择浏览目录&#xff0c;JAVA的根目录&#xff0c;本处为D:\Java\jdk1.8.0_251&#xff…

易语言模拟真人鼠标轨迹算法

一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序&#xff0c;它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言&#xff0c;原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势&#xff1a; 模拟…

洛谷P9950 [USACO20FEB] Mad Scientist B

P9950 [USACO20FEB] Mad Scientist B - 洛谷 代码区&#xff1a; #include <iostream> #include <string>using namespace std; int main() {int n;cin>> n;string a;string b;cin >> a >> b;int flag,step0,i,t;for ( i 0; i < a.length(…

prometheus自定义监控(pushgateway和blackbox)和远端存储VictoriaMetrics

1 pushgateway采集 1.1 自定义采集键值 如果自定义采集需求时&#xff0c;就可以通过写脚本 定时任务定期发送数据到 pushgateway 达到自定义监控 1.部署 pushgateway&#xff0c;以 10.0.0.42 节点为例 1.下载组件 wget https://github.com/prometheus/pushgateway/relea…

C++相关基础概念之入门讲解(上)

1. 命名空间 C中的命名空间&#xff08;namespace&#xff09;是用来避免命名冲突问题的一种机制。通过将类、函数、变量等封装在命名空间中&#xff0c;可以避免不同部分的代码中出现相同名称的冲突。在C中&#xff0c;可以使用namespace关键字来定义命名空间。 然后我们在调…

【大模型】Transformer、GPT1、GPT2、GPT3、BERT 的论文解析

前言 在自然语言处理&#xff08;NLP&#xff09;和深度学习的快速发展中&#xff0c;Transformer模型和 GPT系列模型扮演了至关重要的角色。本篇博客旨在对这些开创性的论文进行介绍&#xff0c;涵盖它们的提出时间、网络结构等关键信息&#xff0c;能够快速的理解这些模型的设…

【Java 优选算法】分治-归并排序

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 数组分块如二叉树的前序遍历, 而归并排序就如二叉树的后序遍历 912. 排序数组 解法 使用归并算法 根据中间点划分区间, mid (right left ) / 2将左右区间排序合并两个有…

三格电子Modbus TCP转CANOpen网关相关问答

型号&#xff1a;SG-TCP-COE-210 Q1: Modbus TCP转CANOpen网关的主要功能是什么&#xff1f; A1: 该网关的核心功能是实现 Modbus TCP协议与CANOpen协议之间的双向数据转换&#xff0c;使支持Modbus TCP的工业设备&#xff08;如PLC、HMI&#xff09;能够与基于CANOpen协议的设…

Flutter FloatingActionButton 从核心用法到高级定制

目录 1. 引言 2. FloatingActionButton 的基本用法 3. 主要属性 4. 进阶定制技巧 4.1 扩展型 FAB 4.2 动态变形动画 4.3 多个 FAB 协同 5. 主题与动效集成 5.1 全局主题配置 5.2 平台适配方案 5.3 高级动画控制器 6. 最佳实践 6.1 布局规范 6.2 性能优化 6.3 无…

【恒流源cc与恒压源cv典型电路解析】

在电子电路设计中&#xff0c;恒流源和恒压源是两种至关重要的电源类型&#xff0c;它们分别能为负载提供稳定的电流和电压。以下将详细解析这两种电源的典型电路。 ## 一、恒压源 ### &#xff08;一&#xff09;采用线性稳压器的恒压源电路 1. **电路组成** - 以常见的 78…

Anaconda conda常用命令:从入门到精通

1 创建虚拟环境 conda create -n env_name python3.8 2 创建虚拟环境的同时安装必要的包 conda create -n env_name numpy matplotlib python3.8 3 查看有哪些虚拟环境 以下三条命令都可以。注意最后一个是”--”&#xff0c;而不是“-”. conda env list conda info -e c…

Topo2Seq:突破DETR局限,车道拓扑推理新高度

本篇针对先前DETR类框架远距离感知较弱且车道端点不对齐问题&#xff0c;提出了一种通过拓扑序列学习来增强拓扑推理的新方法Topo2Seq。在OpenLane-V2数据集上的实验结果表明&#xff0c;Topo2Seq在拓扑推理方面实现了最先进的性能。 ©️【深蓝AI】编译 论文标题&#xf…

程序地址空间:深度解析其结构,原理与在计算机系统中的应用价值

目录 1. 程序地址空间回顾 1.1 虚拟地址 2.进程地址空间 分页&虚拟地址空间 引入新概念 解释上述关于同样的地址不同的变量值问题 回答一个历史遗留问题 ​编辑 3.虚拟内存管理 虚拟内存是什么 虚拟地址空间区域划分 为什么要有虚拟地址空间 1. 程序地址空间回…

火语言RPA--列表项内容设置

【组件功能】&#xff1a;设置列表项内容 配置预览 配置说明 索引项位置支持T或# 列表对象待修改内容的索引位置。 内容值 支持T或# 默认FLOW输入项 修改的内容值。 示例 对象修改 描述 列表对象索引为0的数据修改为A字符串&#xff0c;并打印修改结果。 配置 输出结…

1.Qt SDK 的下载和安装

1Qt 下载官⽹&#xff1a; http://download.qt.io/archive/qt/ 2版本自行选择 3下载对应版本的.exe文件 4下载包下载完成 5双击.exe文件&#xff0c;默认下一步&#xff0c;要注册一个qt的账户 6记住程序安装的位置&#xff0c;后面要配置环境变量 7勾3个&#xff08;组件自行…

嵌入式系统中的Board Support Package (BSP)详解:以Xilinx Zynq为例

嵌入式系统中的Board Support Package (BSP)详解&#xff1a;以Xilinx Zynq为例 引言 在嵌入式系统开发中&#xff0c;硬件与软件的无缝集成至关重要。Board Support Package (BSP) 作为连接硬件和操作系统的桥梁&#xff0c;在这一过程中扮演着核心角色。本文将深入探讨BSP的…

Vue 生命周期详解:从创建到销毁的全过程

Vue.js 是一个流行的前端框架&#xff0c;它通过组件化的方式帮助开发者构建用户界面。在 Vue 中&#xff0c;每个组件实例都有其生命周期&#xff0c;从创建、挂载、更新到销毁&#xff0c;Vue 提供了一系列的生命周期钩子函数&#xff0c;允许我们在组件的不同阶段执行自定义…