Variables update

[eduarddotgg]

When creating or updating variables webpack server needs to be restarted to update variables values.

[serkanyersen]

this happens when you import _variables.css kind of files. Since they are not imported in the javascript code, webpack won't track changes on these files and rebuild will not trigger. to trigger a build you either need restart the server or go ahead and make a change on all files that imports _variables.css

I was going to create this issue but I see that it's already here. SASS doesn't have this problem at the moment.

[zzq889]

+1
The recent update of postcss-import add addDependencyTo option which allow hot reload for webpack.
Any idea to support the same feature or just replace the current postcss-partial-import ?

[jonathantneal]

@zzq889, could you explain addDependencyTo? The feature is a week old in postcss-import. Also, if I replace the current postcss-partial-import with postcss-import then we lose caching and the ability to do this:

@import 'components/panel';

[zzq889]

I've found postcss-import could support hot reload with postcss-loader in webpack:

postcss: function (webpack) {
    return [
        postcssImport({
            addDependencyTo: webpack
        })
    ];
}

I think the issue is related to the css modules.

{
  test: /\.scss$/,
  loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss',
  exclude: /node_modules/
}

When I modify the _variables.css it won't trigger build. I do test with sass-loader and it just works as I expected.

[volochiy-s]

Hi guys, any solutions or workarounds on that ?

[volochiy-s]

If someone else is looking for the workaround - I replaced postcss-partial-import with postcss-import and "addDependencyTo: webpack" and that did the trick for me

[jonathantneal]

FWIW, this is now something you can do. https://github.com/jonathantneal/postcss-advanced-variables/#variables-1