4

我的问题是 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

4

1 回答 1

4

我正在使用 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-loadertestproduction

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

于 2021-03-18T00:12:53.873 回答