https://github.com/scriptex/postcss-watch-folder
PostCSS plugin to watch folder for changes
https://github.com/scriptex/postcss-watch-folder
postcss-plugin watch-files watch-folder
Last synced: 7 months ago
JSON representation
PostCSS plugin to watch folder for changes
- Host: GitHub
- URL: https://github.com/scriptex/postcss-watch-folder
- Owner: scriptex
- License: mit
- Created: 2018-04-16T13:03:54.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-03-05T06:19:36.000Z (7 months ago)
- Last Synced: 2025-03-18T04:42:42.366Z (7 months ago)
- Topics: postcss-plugin, watch-files, watch-folder
- Language: JavaScript
- Homepage: https://atanas.info/portfolio/open-source/postcss-watch-folder
- Size: 243 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.codacy.com/gh/scriptex/postcss-watch-folder/dashboard?utm_source=github.com&utm_medium=referral&utm_content=scriptex/postcss-watch-folder&utm_campaign=Badge_Grade)
[](https://codebeat.co/projects/github-com-scriptex-postcss-watch-folder-master)
[](https://www.codefactor.io/repository/github/scriptex/postcss-watch-folder)
[](https://deepscan.io/dashboard#view=project&tid=3574&pid=5257&bid=40799)
[](https://github.com/scriptex/postcss-watch-folder/)
# postcss-watch-folder
> A [PostCSS](https://github.com/postcss/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
1. NodeJS
2. NPM or Yarn
3. PostCSS
4. Bash Terminal (Default on OSX/Linux, GitBash on Windows)
## Install
```sh
npm i postcss postcss-watch-folder --save-dev
```
or
```sh
yarn add postcss postcss-watch-folder --dev
```
## Usage
Webpack:
```javascript
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:
```javascript
folder: './assets/styles/', // The folder to watch
main : './assets/styles/main.css' // The main styles entrypoint
```
Default options are:
```javascript
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](https://github.com/scriptex/webpack-mpa/blob/master/webpack.config.js#L147)
## License
MIT
---
Connect with me:
---
Support and sponsor my work:
