Edit sass before node-sass compile it into css

Question

I have been looking for a while but i haven't found a solution yet, I'm using node-sass and i need to edit the scss before compiling it (more specifically, the variables), sadly once you execute the render function it gets directly compiled into css, is there a way of editing the imported scss before node-sass compiles it ? Or read the scss and resolve all the imports without node-sass ?

thank you

Answer 1

First you should add !default keyword to end of your scss variables and then you can pass parameters which one you want to override for example:

You have an variable for primary color, in scss file yo should define it like $primaryColor = #fff !default and then while overriding this column you should send params like { primaryColor: '#bbb' } this one will override your primaryColor variable in your scss file.

const generateSassVariables = map =>
    Object.keys(map)
      .map(name => `$${name}:${map[name]};`)
      .join('\n');

sass.render(
    {
      data: `${generateSassVariables(newVariables)}@import '${scssFilePath}';`,
      includePaths: [styleBasePath, 'app/'],
      outputStyle: 'compressed',
    },
    (error, result) => {..... })