Skip to content
This repository was archived by the owner on Feb 18, 2022. It is now read-only.
This repository was archived by the owner on Feb 18, 2022. It is now read-only.

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

@nolimitdev

Description

@nolimitdev

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions