Repository navigation
How to watch file defined in importFrom in webpack? #232
Description
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
Activity
brandondurham commentedon Feb 2, 2021
Curious about reload, too. This solution seems to work but of course seems undesirable.
nolimitdev commentedon Nov 25, 2021
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-dependenciesis very simple so maybe part of its code could be implemented inpostcss-custom-propertiesto watchOptions.importFrom