带有 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 预处理器模块
• 我必须在vue.config.js 中使用chainWebpack 才能在我的test 和production 环境中使用null-loader

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