5

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

petritz
  • 182
  • 1
  • 9

1 Answers1

5

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

ZeroLiam
  • 196
  • 1
  • 8
  • This worked wonders for me. It's very unexpected that the null-loader suddenly fixes the issue. Can you help me understand why this is the case? – ekampp Feb 11 '22 at 10:34
  • @ekampp because your styles are just ignored. This is not all that great of a solution – heap1 Feb 21 '22 at 08:33
  • @heap1, my styles are being parsed and processed and works with this solution. So not completely ignored. I think there's more to it than this. – ekampp Feb 21 '22 at 12:33
  • @ekampp no, your styles are replaced with empty content. So it may seem like they are getting loaded, but they're not really. For example if you had a css class that sets content, then try checking in your test suite if the html contains the content. It will not, because the css is discarded in place of empty content – heap1 May 20 '22 at 11:51
  • ^ if the above test results in your html actually containing the content, it is because your styles are embedded with the html and your css is not served seperately – heap1 May 20 '22 at 11:55