为 Vue JS 项目安装 node-sass 时出错

Question

当运行在 VueJS 项目上运行 'npm install' 时，我运行出现以下错误：

error: no matching constructor for initialization of 'v8::String::Utf8Value'
  v8::String::Utf8Value string(value);
                        ^      ~~~~~
/Users/webdevwolf/.node-gyp/12.14.1/include/node/v8.h:3046:5: note: candidate constructor not viable: no known conversion from 'v8::Local<v8::Value>' to
      'const v8::String::Utf8Value' for 1st argument
    Utf8Value(const Utf8Value&) = delete;
    ^
/Users/webdevwolf/.node-gyp/12.14.1/include/node/v8.h:3039:5: note: candidate constructor not viable: requires 2 arguments, but 1 was provided
    Utf8Value(Isolate* isolate, Local<v8::Value> obj);
    ^
1 error generated.
make: *** [Release/obj.target/binding/src/create_string.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/node-sass/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:223:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/node-sass/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /usr/local/lib/node_modules/node-sass
gyp ERR! node -v v12.14.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.11.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the node-sass@4.11.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

为了解决这个问题，我尝试了以下方法：

正在将 Node 更新到最新的稳定版本
正在更新sass
运行 Sass

我现在对此感到非常沮丧，我什至不确定这个错误意味着什么 - 有没有人知道如何解决这个问题？

Answer 1

我用 - 解决了这个问题 npm install node-sass

如果失败则

删除您的 node_modules 文件夹
npm install
npm install node-sass

有时，当我在使用最新版本的 sass 后回到旧的 vue 项目时，我会收到此错误。清理模块和 re-installing 我的项目的正确版本似乎总能修复它。

Answer 2

我在使用 Node 版本 16 和 Vue 3 时遇到了类似的问题。该问题似乎与 node-sass 相关，并且与节点版本 16 或其他版本不兼容。其他人提到使用 Node 14 没有问题。

即使我运行 vue create app 单击手动配置选项并选择设置/配置 node-sass 也会发生此错误。它会开始下载，但在下载 node-saas 并因错误退出时冻结。

我的解决方案是下载不带 node-sass 选项的 Vue 3，然后在安装完成后，npm i -D sass sass-loader@7 而不是 npm i -D node-sass

您还需要将此添加到根目录中的 vue.config.js 文件中。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
      },
    },
  }
}

这就是获得 scss 运行所需的全部内容。只是不要忘记在脚本标签中添加 lang="scss" 属性。

<style lang="scss">
.....
</style>

我从这篇文章中找到了我的解决方案： https://www.priestch.com/replace-node-sass-with-dart-sass-in-vue-cli3-based-project/

Answer 3

如果您正在努力

节点 16.13.2
@vue/cli 4.5.15
vue create 创建一个新的 Vue 3 项目
你想使用 node-sass 但你一直有错误

不要在 vue create

的项目中添加 css 预处理器

使用 vue create 创建您的项目，然后使用此命令（并且正是此命令）

npm i -D sass-loader@^10.0.0
npm i node-sass@^6.0.1 --unsafe-perm

Answer 4

发布的 vue 和 nodejs 16 存在问题 here。 node-sass (4.11) 与 vue-cli 4.5 捆绑在一起，与 nodejs 16 不兼容。我做了什么：

将vue-cli升级到最新版本（目前是5.0.4）
创建一个新项目（在我的例子中是 vue ui）
编辑：删除旧 node_modules 文件夹
将我的旧 package.json 与新的进行比较并接管特定于 vue 的导入
比较 vue、typescript、jest、cypress、eslint（或任何你使用的）的配置文件
编辑：在执行下一个命令之前备份或提交，因为它会更改您的配置文件。然后运行 vue 添加@vue/cli-plugin-eslint（npm install会失败）
并非绝对必要：启动 npm-gui 并将所有软件包更新为兼容版本（没有 npm-gui 不知道如何执行此操作）注意：兼容并不总是更新。

这里是为没有 Router 的项目（TS、ESLint、Jest、Cypress、Sass、Babel、Vuex）生成的package.json：

{
  "name": "vuenew",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "cypress": "^8.3.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "ts-jest": "^27.0.4",
    "typescript": "~4.5.5"
  }
}

EDIT2：我们发现了一些错误，这似乎是某种 vue3 <-> TS 问题。将 vue-cli 升级到 5.0.4 后，tsc 在 node_modules 内的 .ts（merge.ts 来自 vue-splide）文件中报告错误。切换回 TS 4.5.5 解决了这个问题。

编辑：
在我的项目中，我可以升级：

~~typescript 到 4.6.3（当前最新版本）~~

~~@vue/eslint-config-typescript 到 10.0.0（当前最新）~~

为 Vue JS 项目安装 node-sass 时出错

Error When Installing node-sass for Vue JS Project

node-modules

node-sass

npm-install