Skip to content
This repository was archived by the owner on Apr 16, 2019. It is now read-only.

Commit 2665105

Browse files
shepherdwindshepherdwind
authored
Merge pull request #47 from keegan-lillo/fix-css-modules-js-reload
Hot reload JS files when the accompanying CSS Module file changes
2 parents 0a1be90 + 9e7a2f5 commit 2665105

File tree

9 files changed

+125
-1
lines changed

9 files changed

+125
-1
lines changed

‎examples/css-modules/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
!dist/index.html

‎examples/css-modules/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>css hot loader example</title>
6+
7+
<link rel="stylesheet" href="output.css">
8+
</head>
9+
<body>
10+
<div class="global-example">I'm styled globally</div>
11+
<div id="css-modules-root"></div>
12+
13+
<script src="output.js"></script> <!-- webpack javascript output -->
14+
15+
</body>
16+
</html>
17+

‎examples/css-modules/package.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "css-hot-reload-example",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "webpack --progress",
8+
"start": "NODE_ENV=development webpack-serve --port 3000 --config webpack.config.js"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"css-hot-loader": "latest",
15+
"css-loader": "^1.0.0",
16+
"mini-css-extract-plugin": "^0.4.0",
17+
"webpack": "^4.1.1",
18+
"webpack-cli": "^3.1.0",
19+
"webpack-dev-server": "^3.1.1",
20+
"webpack-serve": "^2.0.2"
21+
}
22+
}

‎examples/css-modules/src/css-modules-test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const styles = require('./css-modules-test.module.css');
2+
console.log('styles', styles);
3+
4+
const rootElem = document.getElementById('css-modules-root');
5+
const elem = document.createElement('div');
6+
elem.classList.add(styles.foo);
7+
elem.innerText = "I'm styled using CSS Modules!";
8+
rootElem.innerHTML = '';
9+
rootElem.appendChild(elem);

‎examples/css-modules/src/css-modules-test.module.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.foo {
2+
padding: 12px;
3+
color: #fafafa;
4+
background: #555;
5+
margin: 12px;
6+
}

‎examples/css-modules/src/global.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
body {
2+
background: #eee;
3+
}
4+
5+
.global-example {
6+
text-align: center;
7+
padding-top: 100px;
8+
color: #666;
9+
font-size: 30px;
10+
}

‎examples/css-modules/src/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
require('./global.css');
2+
require('./css-modules-test');
3+
4+
// Entry file requires the below to avoid full page refreshes
5+
if (module.hot) {
6+
module.hot.accept();
7+
}

‎examples/css-modules/webpack.config.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const path = require('path'); // nodejs dependency when dealing with paths
2+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3+
4+
const config = { // config object
5+
entry: {
6+
output: ['./src/index.js'], // entry file
7+
},
8+
output: { // output
9+
path: path.resolve(__dirname, 'dist'), // output path
10+
filename: '[name].js',
11+
},
12+
mode: 'development',
13+
module: {
14+
rules: [
15+
{
16+
oneOf: [ // We use oneOf so we can use both global stylesheets and CSS Modules
17+
{
18+
test: /\.module\.css/,
19+
use: [
20+
'css-hot-loader',
21+
MiniCssExtractPlugin.loader,
22+
{
23+
loader: 'css-loader',
24+
options: {
25+
modules: true,
26+
localIdentName: '[local]__[name]__[hash:base64:5]',
27+
},
28+
},
29+
],
30+
},
31+
{
32+
test: /\.css/,
33+
use: [
34+
'css-hot-loader',
35+
MiniCssExtractPlugin.loader,
36+
'css-loader'
37+
],
38+
},
39+
],
40+
},
41+
], // end rules
42+
},
43+
plugins: [
44+
// webpack plugins
45+
new MiniCssExtractPlugin('[name].css'),
46+
],
47+
devtool: 'source-map',
48+
serve: {},
49+
};
50+
51+
module.exports = config;

‎loader.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ module.exports = function(content) {
1616
// ${Date.now()}
1717
var cssReload = require(${loaderUtils.stringifyRequest(this, '!' + path.join(__dirname, 'hotModuleReplacement.js'))})(module.id, ${JSON.stringify(options)});
1818
module.hot.dispose(cssReload);
19-
module.hot.accept(undefined, cssReload);
2019
}
2120
`;
2221
};

0 commit comments

Comments
 (0)