安装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 4.11.0版本

我对这个问题已经感到非常沮丧了，甚至不确定这个错误的含义是什么-是否有人知道如何解决它？

- Web Develop Wolf

---

你的 package.json 文件中使用了哪个版本的 node-sass？ - Nipun Jain

Answer 1

我遇到了与Node 16和Vue 3相关的类似问题。

问题似乎与node-sass有关，与node版本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/。该文章介绍了如何在基于Vue CLI3的项目中使用Dart Sass替换Node Sass。

- tcanbolat

Answer 2

Vue和Node.js 16存在问题，详情请参见此处。与vue-cli 4.5捆绑的node-sass（4.11）与Node.js 16不兼容。我所做的：

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

这是项目的生成的 package.json（TS、ESLint、Jest、Cypress、Sass、Babel、Vuex）但不包括 Router：

{
  "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"
  }
}

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

编辑：

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

• typescript到4.6.3（当前最新版本）
• @vue/eslint-config-typescript到10.0.0（当前最新版本）

- aProgger

Answer 3

我用以下命令解决了这个问题 - npm install node-sass

如果上述方法失败，请执行以下步骤：

1. 删除你的 node_modules 文件夹
2. npm install
3. npm install node-sass

有时候，当我回到一个旧的 vue 项目并使用最新版本的 sass 时，会出现这个错误。清理模块并重新安装适合我的项目的正确版本似乎总是可以解决它。

- Dirk Teucher

Answer 4

如果您在以下方面遇到困难：

• node 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

- Paul