scss @import fail

[tmaximini]

Hi,
I am using css-modules-require-hook on my koa.js server. I do server side rendering of react components. It worked fine when just using css but now we want to switch to Sass in order to use variables.

I am using the following code to compile scss on runtime:

// css modules
const cssRequireHook = require('css-modules-require-hook');
const sass = require('node-sass');
cssRequireHook({
    generateScopedName: '[name]__[local]___[hash:base64:5]',
    extensions: [ '.scss', '.css' ],
    preprocessCss: data => sass.renderSync({ data }).css
});

It works, but as soon as I try to @importany other .scss file it breaks

@import '../../styles/variables';

.myclass {
    background: $color-white;
    clear: both;
}

in variables.scss

$color-white: #000;

the error I get:

/Users/tmaximini/data/frontend-node/node_modules/node-sass/lib/index.js:424
  throw util._extend(new Error(), JSON.parse(result.error));
  ^

Error: File to import not found or unreadable: ../../styles/variables

the path is definitely correct, and webpack handles it fine on client. I don't use webpack on my server code so I hoped that the require-hook can somehow resolve these @imports.

Any idea how to achieve this?
thanks

[tmaximini]

seems to work when I tell the sass.renderSync function to include my styles path:

cssRequireHook({
    generateScopedName: '[name]__[local]___[hash:base64:5]',
    extensions: [ '.scss', '.css' ],
    preprocessCss: data => sass.renderSync({
        data,
        includePaths: [path.resolve(__dirname, '../../client/styles')]
    }).css
});

[mightyaleksey]

Presumably sass resolves paths from the working directory. I'd like to suggest you to try this:

cssRequireHook({
    generateScopedName: '[name]__[local]___[hash:base64:5]',
    extensions: [ '.scss', '.css' ],
    preprocessCss: (data, filename) =>
      sass.renderSync({
        data,
        file: filename,
      }).css,
});

from: https://github.com/sass/node-sass#file

[tmaximini]

it doesn't work, it gives me the same error. I think I'll stick with includePaths then.

[tmaximini]

I stand corrected, your answer works @sullenor - I just had to drop my includePaths completely from webpack and just use relative imports everywhere! thanks

[JackieLs]

Thx It's worked @tmaximini with your solution

[afonsomatos]

This worked for me:

const hook = require("css-modules-require-hook");
const sass = require("node-sass");
const path = require("path");

hook({
    extensions: [".scss", ".css"],
    preprocessCss: (data, file) =>
        sass.renderSync({ data, file, includePaths: [path.resolve(__dirname, "../../node_modules")] }).css
});