Skip to content

Commit 62f2d04

Browse files
scriptexscriptex
committed
Fix CSS HMR
1 parent 95ab067 commit 62f2d04

File tree

5 files changed

+574
-862
lines changed

5 files changed

+574
-862
lines changed

‎index.php‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -26,35 +26,35 @@ function autoversion($url) {
2626
For more info about the favicons and meta tags below see
2727
https://github.com/audreyr/favicon-cheat-sheet
2828
-->
29-
<link rel="apple-touch-icon" sizes="57x57" href="/assets/images/favicon/apple-touch-icon-57x57.png" />
30-
<link rel="apple-touch-icon" sizes="114x114" href="/assets/images/favicon/apple-touch-icon-114x114.png" />
31-
<link rel="apple-touch-icon" sizes="72x72" href="/assets/images/favicon/apple-touch-icon-72x72.png" />
32-
<link rel="apple-touch-icon" sizes="144x144" href="/assets/images/favicon/apple-touch-icon-144x144.png" />
33-
<link rel="apple-touch-icon" sizes="60x60" href="/assets/images/favicon/apple-touch-icon-60x60.png" />
34-
<link rel="apple-touch-icon" sizes="120x120" href="/assets/images/favicon/apple-touch-icon-120x120.png" />
35-
<link rel="apple-touch-icon" sizes="76x76" href="/assets/images/favicon/apple-touch-icon-76x76.png" />
36-
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/favicon/apple-touch-icon-152x152.png" />
37-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-196x196.png" sizes="196x196" />
38-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-96x96.png" sizes="96x96" />
39-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-32x32.png" sizes="32x32" />
40-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-16x16.png" sizes="16x16" />
41-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-128.png" sizes="128x128" />
42-
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon/favicon.ico" />
29+
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicon/apple-touch-icon-57x57.png" />
30+
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png" />
31+
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png" />
32+
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicon/apple-touch-icon-144x144.png" />
33+
<link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicon/apple-touch-icon-60x60.png" />
34+
<link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicon/apple-touch-icon-120x120.png" />
35+
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicon/apple-touch-icon-76x76.png" />
36+
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/favicon/apple-touch-icon-152x152.png" />
37+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-196x196.png" sizes="196x196" />
38+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-96x96.png" sizes="96x96" />
39+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-32x32.png" sizes="32x32" />
40+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-16x16.png" sizes="16x16" />
41+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-128.png" sizes="128x128" />
42+
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon/favicon.ico" />
4343
<meta name="application-name" content="{ Project Name }"/>
4444
<meta name="msapplication-TileColor" content="#000000" />
45-
<meta name="msapplication-TileImage" content="/assets/images/favicon/mstile-144x144.png" />
46-
<meta name="msapplication-square70x70logo" content="/assets/images/favicon/mstile-70x70.png" />
47-
<meta name="msapplication-square150x150logo" content="/assets/images/favicon/mstile-150x150.png" />
48-
<meta name="msapplication-wide310x150logo" content="/assets/images/favicon/mstile-310x150.png" />
49-
<meta name="msapplication-square310x310logo" content="/assets/images/favicon/mstile-310x310.png" />
50-
<meta name="msapplication-config" content="/config.xml" />
45+
<meta name="msapplication-TileImage" content="assets/images/favicon/mstile-144x144.png" />
46+
<meta name="msapplication-square70x70logo" content="assets/images/favicon/mstile-70x70.png" />
47+
<meta name="msapplication-square150x150logo" content="assets/images/favicon/mstile-150x150.png" />
48+
<meta name="msapplication-wide310x150logo" content="assets/images/favicon/mstile-310x150.png" />
49+
<meta name="msapplication-square310x310logo" content="assets/images/favicon/mstile-310x310.png" />
50+
<meta name="msapplication-config" content="config.xml" />
5151
<meta name="theme-color" content="#000000" />
5252

5353
<?php critical_css(); ?>
5454

55-
<link rel="stylesheet" href="<?php autoversion('/assets/dist/app.css'); ?>" />
55+
<link rel="stylesheet" href="<?php autoversion('assets/dist/app.css'); ?>" />
5656
</head>
5757
<body>
58-
<script src="<?php autoversion('/assets/dist/app.js'); ?>" async defer></script>
58+
<script src="<?php autoversion('assets/dist/app.js'); ?>" async defer></script>
5959
</body>
6060
</html>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@
4242
"clean-webpack-plugin": "1.0.1",
4343
"create-pwa": "2.3.0",
4444
"critical": "2.0.6",
45-
"css-loader": "5.0.1",
45+
"css-loader": "3.5.3",
4646
"cssnano": "4.1.10",
4747
"eslint": "7.17.0",
4848
"eslint-config-recommended": "4.1.0",
49+
"extract-text-webpack-plugin": "4.0.0-beta.0",
4950
"file-loader": "6.2.0",
50-
"mini-css-extract-plugin": "1.3.3",
5151
"node-sass": "4.14.1",
5252
"node-sass-magic-importer": "5.3.2",
5353
"postcss": "8.2.2",

‎renovate.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@
99
"vulnerabilityAlerts": {
1010
"labels": ["security"],
1111
"assignees": ["@scriptex"]
12-
}
12+
},
13+
"ignoreDeps": ["css-loader"]
1314
}

‎webpack.config.js‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ const { parse } = require('url');
88

99
const magicImporter = require('node-sass-magic-importer');
1010
const { ProvidePlugin } = require('webpack');
11+
const ExtractTextPlugin = require('extract-text-webpack-plugin');
1112
const SpritesmithPlugin = require('webpack-spritesmith');
1213
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
1314
const WebpackShellPlugin = require('webpack-shell-plugin');
1415
const CleanWebpackPlugin = require('clean-webpack-plugin');
15-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
1616

1717
const { url, server, NODE_ENV } = argv;
1818
const sourceMap = {
@@ -108,7 +108,8 @@ const browserSyncConfig = {
108108
};
109109

110110
const extractTextConfig = {
111-
filename: 'dist/app.css'
111+
filename: 'dist/app.css',
112+
allChunks: true
112113
};
113114

114115
const spritesmithConfig = {
@@ -171,28 +172,27 @@ module.exports = () => {
171172
rules: [
172173
{
173174
test: /\.(sa|sc|c)ss$/,
174-
use: [
175-
{
176-
loader: MiniCssExtractPlugin.loader
177-
},
178-
{
179-
loader: 'css-loader',
180-
options: sourceMap
181-
},
182-
{
183-
loader: 'postcss-loader',
184-
options: { postcssOptions }
185-
},
186-
{
187-
loader: 'sass-loader',
188-
options: {
189-
sassOptions: {
190-
importer: magicImporter()
191-
},
192-
...sourceMap
175+
use: ExtractTextPlugin.extract({
176+
use: [
177+
{
178+
loader: 'css-loader',
179+
options: sourceMap
180+
},
181+
{
182+
loader: 'postcss-loader',
183+
options: { postcssOptions }
184+
},
185+
{
186+
loader: 'sass-loader',
187+
options: {
188+
sassOptions: {
189+
importer: magicImporter()
190+
},
191+
...sourceMap
192+
}
193193
}
194-
}
195-
]
194+
]
195+
})
196196
},
197197
{
198198
test: /\.js$/,
@@ -221,7 +221,7 @@ module.exports = () => {
221221
jQuery: 'jquery',
222222
'window.jQuery': 'jquery'
223223
}),
224-
new MiniCssExtractPlugin(extractTextConfig),
224+
new ExtractTextPlugin(extractTextConfig),
225225
new SpritesmithPlugin(spritesmithConfig),
226226
new CleanWebpackPlugin(['../assets/dist/'], cleanConfig),
227227
new WebpackShellPlugin({

0 commit comments

Comments
 (0)