时间戳

首页 > 解决方案 > sass 和 Vue 3 出错 - 找不到模块“sass”

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

问题描述

我收到此错误

编译失败。./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

当我scss从primeflex

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 安装 sass

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

-$ npm 重建 sass

-$ npm 重建 sass-loader

没有任何效果。

一些建议？

非常感谢

标签： sassvuejs3

解决方案

尝试使用

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

推荐阅读