Pass variables to scss files

[nwhite89]

I'm wanting to pass variables from webpack to the scss files, for example opacity is able to be changed by a user and stored in the db. Ideally I'd pass the variable same way as you do to JS files via webpack and pass them straight through to the SCSS files before compilation.

[jhnns]

Could you show an example how you'd expect things to work?

I'm afraid that this is currently not possible (if I got it right). But with custom importers #31 it's probably possible. Then you can write a special loader, which generates scss code to import your dynamic vars.

[nwhite89]

@jhnns thank you for your response I'm thinking of the webpack.DefinePlugin so perhaps something like

webpack.DefinePlugin({
  'SCSS_OPACITY': '0.4'
});

$opacity: SCSS_OPACITY;
@include opacity($opacity);

but perhaps if it's easier for it to create a file with all of them and somehow matching SCSS_OPACITY to be $SCSS_OPACITY ?? and attaching the variables above of files when generating? what are your thoughts?

[jhnns]

Mhmmm your solution would probably work too.

And when you need to access the variables also via client-side JavaScript:

webpack.DefinePlugin(require("./styles/variables.js"));

[nwhite89]

Yeah, using the definePlugin I think would be ideal because it would use the current inner workings of webpack but also allow for variables to be used across both the JS and SCSS files which I'm not entirely sure when you may need it but it would be more powerful I feel.

[jhnns]

Oh, there are use-cases where this is required... :)

I'll check that!

[nwhite89]

Using this perhaps? https://github.com/webpack/docs/wiki/list-of-plugins#dependency-injection

Without looking into it I would hazard a guess it should make it easier? (hopefully) :)

[kasper573]

Hi! I wanted the same feature a while back but realized this is already supported by webpack. My solution looks like this:

var sass = encodeURIComponent(jsonToSassVars(sassGlobals));
var webpackConfig = {
    module: {
        loaders:[
            {test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass}
        ]
    },
}

The prepend-loader and jsonToSassVars are custom work of mine.

[nwhite89]

@kasu any chance of them being made Open Source?

[kasper573]

@nwhite89 Sure thing, here you go: prependLoader.js and jsonToSassVars.js.

[nwhite89]

@kasu cheers 👍 although it would be nice to have this functionality baked into sass-loader

[jhnns]

@kasu haha, nice!
@nwhite89 no I don't think so. I don't want to extend the language itself...

[EdwardIrby]

@kasu really liked your work so I went and forked it into a npm loader https://www.npmjs.com/package/jsontosass-loader

[nwhite89]

@EdwardIrby 👍

[kasper573]

@EdwardIrby cool :)!

[jhnns]

Is @EdwardIrby 's solution working for you? I'd like to link the loader in our README, but I'm not sure about how safe that string replaces are 😁 ...

Do you have any experience on this?