sass 和 Vue 3 出错 - 找不到模块“sass”

Posted 2023-02-21

【中文标题】sass 和 Vue 3 出错 - 找不到模块“sass”

【英文标题】：Error with sass and Vue 3 - Cannot find module 'sass'

【发布时间】：2021-08-04 04:13:09

【问题描述】：

我收到了这个错误

编译失败。 ./node_modules/primeflex/src/_variables.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!. /node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./node_modules/primeflex/src/_variables.scss) 模块错误（来自 ./node_modules/sass-loader/dist/cjs.js）：不能 查找模块 'sass' 需要堆栈：

/Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/sass-loader/dist/utils.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/sass-loader/dist/index.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/sass-loader/dist/cjs.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/loader-runner/lib/loadLoader.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/loader-runner/lib/LoaderRunner.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/webpack/lib/NormalModule.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/webpack/lib/NormalModuleFactory.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/webpack/lib/Compiler.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/webpack/lib/webpack.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/@vue/cli-service/lib/commands/serve.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/@vue/cli-service/lib/Service.js /Users/agustinguerra/Proyectar/proyectos/dacal/node_modules/@vue/cli-service/bin/vue-cli-service.js

当我从primeflex 导入scss 时

import 'primeflex/src/_variables.scss';
import 'primeflex/src/_grid.scss';
import 'primeflex/src/_formlayout.scss';
import 'primeflex/src/_display.scss';
import 'primeflex/src/_text.scss';
import 'primeflex/src/flexbox/_flexbox.scss';
import 'primeflex/src/_spacing.scss';
import 'primeflex/src/_elevation.scss';

这是我的package.json

    "name": "dacal",
    "version": "0.1.0",
    "private": true,
    "scripts": 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "scss": "sass --watch scss -o css"
    ,
    "dependencies": 
        "@vueform/multiselect": "^1.4.0",
        "@vueform/slider": "^1.0.5",
        "@vueform/toggle": "^1.1.0",
        "axios": "^0.21.1",
        "core-js": "^3.6.5",
        "mdb-vue-ui-kit": "*",
        "node-sass": "^6.0.0",
        "primeflex": "^2.0.0",
        "primeicons": "^4.1.0",
        "primevue": "^3.4.0",
        "register-service-worker": "^1.7.1",
        "vue": "^3.0.11",
        "vue-router": "^4.0.0-0",
        "vuex": "^4.0.0-0"
    ,
    "devDependencies": 
        "@vue/cli-plugin-babel": "^4.1.2",
        "@vue/cli-plugin-pwa": "^4.1.2",
        "@vue/cli-plugin-router": "^4.1.2",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "^3.3.1",
        "@vue/compiler-sfc": "^3.0.0",
        "sass": "^1.32.13",
        "sass-loader": "^10.2.0",
        "webpack": "^4.46.0"
    ,
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
    ]

我试过了：

-$ npm install sass

-$ npm install -D sass-loader@^10 sass

-$ npm 重建 sass

-$ npm 重建 sass-loader

没有任何效果。

有什么建议吗？

非常感谢

【参考方案1】：

尝试使用

npm install sass-loader@10 node-sass --save-dev