Vue.js with mocha and styles-resources-loader can't load dependency sass

Question

I have the problem that mochapack does not seem to work together with the style resources loader.

packages that seem to produce the problem:

• "@vue/cli-plugin-unit-mocha": "~4.2.0",
• "vue-cli-plugin-style-resources-loader": "~0.1.4"

My vue.config.js file:

const path = require("path");

module.exports = {
  ...

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

The single sass file that is included through the above config:

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

It seems to load the vue-select.scss correctly but then when interpreting this file it seems to loose its current directory and does not find the imported style.

Error log excerpt:

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 

See full detail error message and code: https://github.com/petritz/food-calculator-web/runs/560575367

Answer 1

I'm using Mocha for my Unit Tests. After having the same issue, I noticed that I had to change my vue.config.js from:

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

to:

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");
    }
  }
};

EDIT: This might have some issues with local dev and production, so I had to change a couple of things:

• I upgraded the sass-loader to at least 10.1.0
• I had to install the null-loader to work around with CSS Preprocessor modules
• I had to use chainWebpack in the vue.config.js to use the null-loader in my test and production environments

I found the answer in this open issue on the Vue CLI GitHub repo: https://github.com/vuejs/vue-cli/issues/4053#issuecomment-544641072