node-sass替换成Dart-sass（全是坑）

改了好久，人都改傻了，我是用的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');
              },
            }
          }
        ],
      },