Does variables actually work with hot-reloading?

[bassment]

I'm having hot reloading in my project and configuring simple-vars like:

{
    loader: 'postcss-loader',
    options: {
      plugins() {
        return [
          simpleVars({
            variables: () => require('./submit_review_app/styles/variables.js'),
          }),
        ];
      },
    },
  },

In docs it says that it is working with hot-reloading. So I assume it should change the varaible which is declared in variables.js file and it would change in my app on the fly. But it doesn't happen even with hard refresh.

Could you please explain me why?

[ai]

@michael-ciniawsky can you help here, please? Maybe we need to update snippet.

[michael-ciniawsky]

Could you try with a postcss.config.js file instead please ? webpack.config.js isn't watched for changes to my knowlegde

postcss.config.js

const variables = require('vars.js') || {...variables}

module.exports = () => ({
  plugins: [
     require('postcss-simple-vars')({ variables})
  ]
})

also (maybe)

webpack.config.js

{
   test:/\.css$/
   use: [
    ...loaders
    {
       loader: 'postcss-loader'
       options: {
+        ident: 'postcss'
         plugins (loader) {
+          const vars = require('path/to/vars')
+          loader.addDependency(vars)

           return [ ...plugins ]
         }
      }
   ]
}

Otherwise open an issue in postcss/postcss-loader please :)

[bassment]

Both approaches don't work ;(

I'll probably create an issue in postcss/postcss-loader

[michael-ciniawsky]

I need your webpack.config.js and more info about your setup in general then :) What doesn't excatly work General Reloading on changes or 'only' HMR etc ?

[michael-ciniawsky]

https://github.com/medfreeman/medfreeman.github.io.bak/commit/c59b4aae09a4a75b4764e1c4e3fe220d55984ae7#diff-11e9f7f953edc64ba14b0cc350ae7b9dR13

[ai]

Do we need to update snippet in plugin docs?

[michael-ciniawsky]

@ai Yeah I will add a Reloading/Hot Reloading section to the docs, but I need to revisit this first (really works?, can be a loader feature etc? :)) and I do it with other chore then, that needs to be done anyways soon 😛

@bassment It's still up to you to open an issue in postcss/postcss-loader, in case it still doesn't work. The safest bet for now is to inline the variables in postcss.config.js

postcss.config.js

const vars = {...variables}

module.exports = () => ...config

[ai]

@michael-ciniawsky OK, I will wait for PR :) Thanks

[mattiascaricato]

@michael-ciniawsky is there any way to get variables working with HMR?

[astrotim]

Any update on this? I am also hoping to use this, but without HMR, it is a deal-breaker.

[ai]

@astrotim you should ask in postcss-loader