带有 mocha 和 styles-resources-loader 的 Vue.js 无法加载依赖项 sass

Question

我的问题是 mochapack 似乎无法与样式资源加载器一起使用。

似乎产生问题的软件包:

"@vue/cli-plugin-unit-mocha": "~4.2.0",

“vue-cli-plugin-style-resources-loader”:“~0.1.4”

我的 vue.config.js文件:

const path = require("path");

module.exports = {
  ...

  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [path.resolve(__dirname, "./src/assets/styles/*.scss")]
    }
  }
};

通过上述配置包含的单个 sass 文件:

@import "~vue-select/src/scss/vue-select.scss";

似乎加载了 vue-select.scss正确，但是在解释此文件时，它似乎丢失了当前目录并且找不到导入的样式。

错误日志摘录:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
1 │ @import "global/variables";
  │         ^^^^^^^^^^^^^^^^^^
  ╵
  /node_modules/vue-select/src/scss/vue-select.scss 1:9  @import
  /src/components/HelloWorld.vue 1:9 

查看完整的详细错误消息和代码:
https://github.com/petritz/food-calculator-web/runs/560575367

Answer 1

我正在使用 Mocha 进行单元测试。在遇到同样的问题后，我注意到我必须更改我的 vue.config.js从:

module.exports = {
  publicPath: "/",
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        prependData: `@import "@/scss/main.scss";`
      }
    }
  }
};

到:

module.exports = {
  publicPath: "/",
  css: {
    sourceMap: true,
    loaderOptions: {
      scss: {
        additionalData: `@import "@/scss/main.scss";`
      }
    }
  },
  chainWebpack: config => {
    if (
      process.env.NODE_ENV === "test" ||
      process.env.NODE_ENV === "production"
    ) {
      const scssRule = config.module.rule("scss");
      scssRule.uses.clear();
      scssRule.use("null-loader").loader("null-loader");
    }
  }
};

编辑:这可能对本地开发和生产有一些问题，所以我不得不改变一些事情:

我升级了sass-loader至少到 10.1.0

我必须安装 null-loader使用 CSS 预处理器模块

我不得不使用 chainWebpack在 vue.config.js使用 null-loader在我的test和 production环境

我在 Vue CLI GitHub 存储库的这个未解决问题中找到了答案: https://github.com/vuejs/vue-cli/issues/4053#issuecomment-544641072