Webpack --watch doesn't trigger for CSS files in specific directory - css

Question

Using webpack --watch, changes to .pcss (PostCSS) files are not picked up when within [src/components/Main/]. Changes to .js files are picked up fine as well as .pcss files in other directories. Because my web app is isomorphic, ExtractTextPlugin is used to squish all the CSS together and push it into a single file.
Full code on GitHub.
This is on macOS 10.12.X.
webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const babelPresetEnvExclude = require('./config/babel-preset-env.exclude')
const babelPluginRelay = ['relay', { schema: 'data/schema.graphqls', }]
const styleRules = {
test: /\.p?css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
'postcss-loader',
],
}),
}
const fileRules = {
test: /\.((pn|sv|jpe?)g|gif)$/,
use: ['file-loader'],
}
const server = {
target: 'node',
entry: './build/unbundled/server.js',
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'build')
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
plugins: [babelPluginRelay],
},
}],
},
styleRules,
fileRules,
]
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
// Overwrites the same file created by the browser webpack config. A loader
// needs to be specified to take care of the import statements and it wont
// work without also outputting a file. There has to be a better way to
// handle this, but I want to focus on other parts for now.
// #todo: make this less bad.
new ExtractTextPlugin('public/main.css'),
]
}
const browser = {
target: 'web',
entry: './build/unbundled/browser.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build/public')
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['env', {
debug: true,
useBuiltIns: true,
targets: { browsers: ['last 2 versions'] },
exclude: babelPresetEnvExclude
}]
],
plugins: [babelPluginRelay],
},
}],
},
styleRules,
fileRules,
]
},
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
new ExtractTextPlugin('main.css'),
]
}
console.log('NODE_ENV', JSON.stringify(process.env.NODE_ENV || 'development'))
module.exports = [browser, server]
package.json:
{
"name": "rtm-owl",
"version": "1.0.0",
"main": "index.js",
"author": "boring#example.com",
"license": "MIT",
"scripts": {
"relay": "relay-compiler --src ./build/unbundled --schema data/schema.graphqls",
"build": "tsc --pretty && npm run relay && webpack --progress",
"debug": "npm run build && node --inspect build/server.js",
"debug-brk": "npm run build && node --inspect-brk build/server.js",
"start": "node build/server.js",
"watch": "concurrently --kill-others 'tsc --pretty --watch' 'relay-compiler --src ./build/unbundled --schema data/schema.graphqls --watch' 'webpack --watch' 'nodemon build/server.js'"
},
"devDependencies": {
"#types/chart.js": "^2.6.1",
"#types/debug": "^0.0.30",
"#types/express": "^4.0.36",
"#types/fs-extra": "^4.0.0",
"#types/isomorphic-fetch": "^0.0.34",
"#types/lodash": "^4.14.71",
"#types/morgan": "^1.7.32",
"#types/react": "^16.0.0",
"#types/react-chartjs-2": "^2.0.2",
"#types/react-dom": "^15.5.1",
"#types/react-redux": "^4.4.47",
"#types/serialize-javascript": "^1.3.1",
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-relay": "^1.1.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"concurrently": "^3.5.0",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"fs-extra": "^4.0.0",
"isomorphic-fetch": "^2.2.1",
"nodemon": "^1.11.0",
"postcss-css-variables": "^0.7.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"postcss-nested": "^2.1.0",
"relay-compiler": "^1.1.0",
"relay-runtime": "^1.1.0",
"serialize-javascript": "^1.3.0",
"style-loader": "^0.18.2",
"typescript": "^2.4.1",
"webpack": "^3.0.0"
},
"dependencies": {
"chart.js": "^2.6.0",
"debug": "^2.6.8",
"express": "^4.15.3",
"farce": "^0.2.1",
"found": "^0.3.1",
"found-relay": "^0.3.0-alpha.4",
"lodash": "^4.17.4",
"morgan": "^1.8.2",
"react": "^15.6.1",
"react-chartjs-2": "^2.5.5",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-relay": "^1.0.0",
"redux": "^3.7.2"
}
}

Answer 1

I encountered similar behaviour, webpack --watch does not react to changes in css files on macOS 10.14. I used the basic style-loader and css-loader and require my css files like require('./style.css').
Solved by switching to nodemon. In my package.json the following setup runs webpack whenever js or css files become modified.
...
scripts: {
"build": "webpack",
"watchbuild": "nodemon --watch ./ --ext js,css --ignore dist --exec \"npm run build\"",
...
},
devDependencies: {
"nodemon": "^2.0.4",
"webpack": "^4.39.3",
...
}
...
The setup can be easily customized to watch more file types and to execute a series of commands. For example nodemon --watch ./ --ext js,ejs,css,pcss --ignore dist --exec 'npm run lint && npm run build' will also watch ejs templates and pcss styles and run linter before build.
Note that I had to ignore my build directory dist to prevent infinite build loop. Note also \" instead of ' to provide compatibility between macOS and Windows.