scss @import fail

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

[sullenor]

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]

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