Codacy Badge Codebeat Badge CodeFactor Badge DeepScan grade Analytics


A PostCSS plugin to watch a folder for new files.

Visitor stats

GitHub stars GitHub forks GitHub watchers GitHub followers

Code stats

GitHub code size in bytes GitHub repo size GitHub language count GitHub top language GitHub last commit


I've had issues when using globs to import stylesheets: @import 'settings/**/*.scss';.

The issues appear when using sass-loader and/or postcss-loader in webpack.

Basically, both SASS and PostCSS do not handle the event of adding files to a watched folder.

This simple plugin solves this issue by watching for add event and updating the main entrypoint.


  1. NodeJS
  2. NPM or Yarn
  3. PostCSS
  4. Bash Terminal (Default on OSX/Linux, GitBash on Windows)


npm i postcss postcss-watch-folder --save-dev


yarn add postcss postcss-watch-folder --dev



module.exports = {
  module: {
    rules: [
        test: /\.css$/,
        use: [
            loader: 'postcss-loader',
            options: {
              plugins: [
                  folder: './your/stylesheets/folder',
                  main: './your/stylesheets/folder/main.css'
                ...other postcss plugins

The location of this plugin does not matter. It can be placed as first or last in the plugins array.


There are two configuration options. They are both required and the plugin will not work if they are not provided:

folder: './assets/styles/',         // The folder to watch
main  : './assets/styles/main.css'  // The main styles entrypoint

Default options are:

folder: '.',           // Current working directory
main  : './style.css'  // style.css located in CWD


You can see a demo of the usage in my webpack boilerplate



Connect with me:


Support and sponsor my work:

Send me your message

Trusted by

  • Duke University brand image
  • Emailio brand image
  • E.ON brand image
  • Kinetik Automotive brand image
  • Robert Ladkani brand image
  • SOD 64 brand image
  • Three11 brand image
  • dmarcian brand image
  • htmlBurger brand image
  • htmlBoutique brand image
  • 2create brand image