How to watch file defined in importFrom in webpack?

nolimitdev commented 3 years ago

Changes in file e.g. vars.css passed to Options.importFrom option does not trigger rebuild. How to solve it? Im wondered that I did not find anything about this problem on the internet and also in issues here. I know that exists 3rd party plugins that can trigger rebuild by watching some file(s) and force rebuild but I did not test it so far. I expected that this plugin will have this feature out of the box and rebuild styles using changed file in Options.importFrom.

UPDATE 1: Using "watch additional files" plugins did not help. I tried https://www.npmjs.com/package/webpack-watch-files-plugin and https://www.npmjs.com/package/extra-watch-webpack-plugin and webpack notifier says that build successfull but bundled app.css is not changed :(

UPDATE 2: I have found workaround. I have noticed that touching (changing modification time) of file postcss.config.js causes rebuild so current content in my vars.css is reflected in bundled app.css...

// postcss.config.js (minimalistic example without real paths/dirs)
module.exports = {
    plugins : [
        ['postcss-custom-properties', { preserve : false, importFrom : 'vars.css' }],
    ],
};

// WatchCssVars.js (minimalistic example without real paths/dirs)
require('fs').watchFile('vars.css', { interval : 200 }, () => {
    var dateNow = new Date();
    Fs.utimesSync('postcss.config.js', dateNow, dateNow);
});

// package.json (minimalistic example without real paths/dirs)
{
  ...,
  "scripts": {
    "build": "webpack", // used for one-time build
    "watch": "npm-run-all --parallel watch-css-vars watch-webpack", // used for automatic build + manual refresh in browser
    "watch-css-vars": "npx ./WatchCssVars.js", // helper only for "watch" script
    "watch-webpack": "webpack --watch", // helper only for "watch" and "server" scripts
    "server": "npm-run-all --parallel watch-css-vars server-webpack", // used for development via WDS + hot reload
    "server-webpack": "webpack-dev-server --hot" // helper only for "server" script
  }
}

So I use 3 commands as needed: npm run build npm run watch npm run server

brandondurham commented 3 years ago

Curious about reload, too. This solution seems to work but of course seems undesirable.

nolimitdev commented 2 years ago

I have created NPM package to solve this https://www.npmjs.com/package/postcss-add-dependencies Why now? Because many other postcss plugins have the same problem that config files are not watched. Including probably new bug in postcss-loader that postcss.config.js is not watched too since postcss-loader v5 (so my fallback in "UPDATE 2" above stopped to work). Plugin postcss-add-dependencies is very simple so maybe part of its code could be implemented in postcss-custom-properties to watch Options.importFrom

postcss / postcss-custom-properties

How to watch file defined in importFrom in webpack? #232