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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions