-
Notifications
You must be signed in to change notification settings - Fork 76
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