在 Vue CLI 中，我如何使用 sass 而不是 node-sass（s​​ass-loader 的默认值）？

Posted 2023-02-22

【中文标题】在 Vue CLI 中，我如何使用 sass 而不是 node-sass（s​​ass-loader 的默认值）？

【英文标题】：In Vue CLI how do I use sass instead of node-sass (default for sass-loader)?

【发布时间】：2020-07-26 15:04:56

【问题描述】：

我遇到了这个答案，但我没有使用 Nuxt.js。我正在使用 Vue CLI。

Is there any way to use sass instead of node-sass (default for sass-loader) in Nuxt.js?

在 Vue CLI 的官方文档中，它展示了一个使用 Dart Sass (sass) 的示例，但在 Vue Loader 文档中，它展示了一个使用 Node Sass (node-sass) 的示例。我只想使用 sass，但收到缺少节点模块 node-sass 的错误。我可以在哪里进行配置更改以使用 Dart Sass？

【问题讨论】：

我可能错了，但从记忆中，这只是从package.json 中删除node-sass 依赖项并添加sass 的问题。您还需要运行 npm prune 以从 node_modules 中删除 node-sass 文件

@Phil 我试试看，谢谢！我最初运行了“npm i sass-loader sass”，它立即给了我错误，但我可能是错的。

@Phil 知道了，谢谢！

这是什么错误？我认为主要问题是两个 Sass 实现都提供了 sass 二进制文件，因此尝试运行类似 npx sass 的东西会模棱两可

【参考方案1】：

使用vue create 创建新的 Vue CLI 项目时，从 CSS 预处理器选项中选择它是最简单的。

手动选择功能 CSS 预处理器 (*)

截图：

---

例如package.json:

"devDependencies": 
  "sass-loader": "^7.2.0",
  "sass": "^1.22.10"

sass = dart-sass

node-sass = node-sass

【讨论】：

如果您已经有需要更改设置的项目，解决方案是什么？

@Deniz npm install -D sass-loader sass