主页 / 问题 / 1368018
Accepted
Mike Kharkov
Asked:2022-06-03 09:39:08 +0000 UTC2022-06-03 09:39:08 +0000 UTC

将 scss 变量加载到模块中不起作用

  • 772

这么一个问题：
为什么scss样式的导入在这个模块（页面）可以工作， 但是在这个模块不行： 怎么治？ 错误如下所示：

在此处输入图像描述



在此处输入图像描述 


 WAIT  Compiling...                                                                                                                                                                     03:25:49

98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                                                                  03:25:50

 error  in ./src/components/header/headerTopNav/index.vue?vue&type=style&index=0&id=e58835c0&lang=scss&scoped=true

Syntax Error: SassError: Can't find stylesheet to import.
  ╷
2 │ @import "../assets/scss/_variables.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  E:\Progi3\vue3-perfect-goods\src\components\header\headerTopNav\index.vue 2:9  root stylesheet


 @ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader
/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/
header/headerTopNav/index.vue?vue&type=style&index=0&id=e58835c0&lang=scss&scoped=true 4:14-487 15:3-20:5 16:22-495
 @ ./src/components/header/headerTopNav/index.vue?vue&type=style&index=0&id=e58835c0&lang=scss&scoped=true
 @ ./src/components/header/headerTopNav/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--15-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-l
oader-v16/dist??ref--1-1!./src/views/Home.vue?vue&type=script&lang=ts
 @ ./src/views/Home.vue?vue&type=script&lang=ts
 @ ./src/views/Home.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.0.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
javascript

1 个回答

  1. Best Answer

    该文件index.vue包含 scss 文件的错误路径。阅读更多关于相对和绝对路径，以及关于..、 .和/。

    如何使用绝对路径？

    你可以，但这是一个糟糕的选择，最好使用webpack resolve alias。

    另外，为了不经常导入 sass 变量文件，请查看 webpack 加载器sass-resources-loader。

    • 2

相关问题