Error on import from within prepended file

[tomas-hartman]

If I prepend (using prepend option in jest-css-modules-transform-config.js) a .scss file into which I import some variables from different folder (using relative path), my test ends up with an error:

 FAIL tests/js/Footer/Footer.test.jsx
  ● Test suite failed to run
    File to import not found or unreadable: ../../styles/colors.
      at Object.module.exports.renderSync (node_modules/node-sass/lib/index.js:441:16)
      at getSassContent (node_modules/jest-css-modules-transform/dist/index.js:69:24)
      at Object.process (node_modules/jest-css-modules-transform/dist/index.js:108:27)

The prepended file (colors.scss) is really simple (as is my config file). Its content is:

/* This theme currently imports dev styles. */
@import '../../styles/colors';

And my jest-css-modules-transform-config.js's content is:

module.exports = {
  prepend: ["./assets/themes/orange/colors.scss"]
};

Paths are correct since they work well with sass-resources-loader in my webpack, only the secondary import fails. This still could be my fault as I might be missing some sass configuration in the config file, but I am not sure at this point.

[Connormiha]

@tomas-hartman thanks for your report. Can you show please your sass-resources-loader configuration. I'll try to fix it this week.

[tomas-hartman]

@Connormiha Thanks for your reply! My sass-resources-loader only uses the very essential:

{
  test: /\.scss$/,
  loader: 'sass-resources-loader',
  options: {
    resources: [
      './assets/themes/orange/colors.scss',
      // some more bootstrap imports etc
    ]
  }
}

[Connormiha]

@tomas-hartman Try to use absolute path. Something like this:

const path = require('path');

module.exports = {
  prepend: [path.resolve(__dirname, "YOUR_ASSETS_FOLDER" ,"assets/themes/orange/colors.scss")]
};

[tomas-hartman]

I gave it a try but got the same error as before. There is probably a problem to resolve the (relative) path inside the colors.scss.

[Connormiha]

@tomas-hartman I reseached this problem. It can be solved with custom importer.
jest-css-modules-transform-config.jss content is something like this:

const path = require('path');

module.exports = {
   prepend: ["./assets/themes/orange/colors.scss"],  
   sassConfig: {
     importer: [
         function(url, prev) {
            if (!url.includes("styles/colors")) return null;

            return {
                file: path.resolve(__dirname, "YOUR_ASSETS_FOLDER" ,"styles/colors")
            };
     ],
  }
};

More information about importer https://sass-lang.com/documentation/js-api#importer

[tomas-hartman]

I finally made it back to this issue in my project, gave it a try and it works! Great! Thank you!