postcss-watch-folder
A PostCSS plugin to watch a folder for new files.
Visitor stats
Code stats
Why?
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.
Dependencies
- NodeJS
- NPM or Yarn
- PostCSS
- Bash Terminal (Default on OSX/Linux, GitBash on Windows)
Install
npm i postcss postcss-watch-folder --save-dev
or
yarn add postcss postcss-watch-folder --dev
Usage
Webpack:
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-watch-folder')({
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.
Options
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
Demo
You can see a demo of the usage in my webpack boilerplate
License
MIT
Connect with me: