Does variables actually work with hot-reloading?

[Anton Perebyinis]

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?

[Andrey Sitnik]

@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 :)

[Anton Perebyinis]

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]

medfreeman/medfreeman.github.io.bak@c59b4aa#diff-11e9f7f953edc64ba14b0cc350ae7b9dR13

[Andrey Sitnik]

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

[Andrey Sitnik]

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

[Matías Caricato]

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

[Tim Holt]

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

[Andrey Sitnik]

@astrotim you should ask in postcss-loader