Vue scss 样式加载因 mocamapck 失败

Posted 2023-02-22

【中文标题】Vue scss 样式加载因 mocamapck 失败

【英文标题】：Vue scss style loads fails with mocamapck

【发布时间】：2020-08-03 09:11:03

【问题描述】：

我在对具有某些 scss 样式的 vue 单文件组件进行单元测试时遇到问题，因为它无法处理 @import 语句。当我使用yarn run dev 运行启动应用程序或为生产构建yarn run build 时，它可以工作，问题仅在单元测试模式下，我的设置使用mochapack 在执行测试之前运行webpack。

 WEBPACK  Compiling...

  [=========================] 98% (after emitting)

 ERROR  Failed to compile with 1 errors

 error  in ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import 'themes/default/variables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  home/xxxxx/src/styles/main.scss 1:9  @import
  /home/xxxxx/src/components/WorkTrigger.vue 39: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/lib/loaders/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/lib??vue-loader-options!./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss& 4:14-442
 @ ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&
 @ ./src/components/WorkTrigger.vue
 @ ./tests/unit/WorkTrigger.spec.ts
 @ ./node_modules/mochapack/lib/entry.js

Type checking in progress...
  [=========================] 100% (completed)

 WEBPACK  Failed to compile with 1 error(s)

Error in ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&

  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  SassError: Can't find stylesheet to import.
    ╷
  1 │ @import 'themes/default/variables';

关于如何解决此问题的任何想法。我不需要加载 scss 进行测试，尽管我无法禁用样式处理（null-loader），因为我在项目中没有 webpack.config 文件，除非绝对必要，否则我不会创建一个。项目是使用 Vue CLI 生成的。

【问题讨论】：

使你的路径相对：../themes/default/variables（或../../themes...，如果是上面两个级别）应该可以工作（对于这两种情况：应用程序和测试）。

谢谢@tao，但它没有，尝试使用相对、绝对路径，这些都不起作用！

遇到同样的问题。

@DanielAngel 我可以通过在路径前加上'~@/...'来解决这个问题，试试看。示例：“@import: '~@/styles/variables';”

【参考方案1】：

我可以通过在路径前加上'~@/...'来解决这个问题，试试看。示例：“@import: '~@/styles/variables';”