From dd05de6764d6ef05d6f5f70b7c4da926fda304e2 Mon Sep 17 00:00:00 2001 From: Bert Peters Date: Thu, 14 Mar 2019 15:10:49 +0100 Subject: [PATCH] Extract CSS to a file. --- package.json | 1 + src/closed.scss | 2 +- src/open.scss | 11 ----------- templates/closed.html | 3 ++- templates/open.html | 1 + webpack.config.js | 10 +++++++++- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index d0bca80..dce08f4 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "devDependencies": { "autoprefixer": "^9.4.9", "css-loader": "^2.1.0", + "mini-css-extract-plugin": "^0.5.0", "node-sass": "^4.11.0", "postcss": "^7.0.14", "postcss-loader": "^3.0.0", diff --git a/src/closed.scss b/src/closed.scss index b996e14..d0fe3fb 100644 --- a/src/closed.scss +++ b/src/closed.scss @@ -33,7 +33,7 @@ body.closed { height: 100%; background-size: contain; background-repeat: no-repeat; - background-image: url(stop.svg); + background-image: url(/stop.svg); background-position: 50% 50%; } } diff --git a/src/open.scss b/src/open.scss index 7124361..3e4ce6e 100644 --- a/src/open.scss +++ b/src/open.scss @@ -1,15 +1,4 @@ // Styles for the "Open" page -@keyframes starrotation { - 0% { - transform: rotate(0deg); - } - 25% { - transform: rotate(90deg); - } - 100% { - transform: rotate(360deg); - } -} body.open { background-color: #a3d165; diff --git a/templates/closed.html b/templates/closed.html index ead59b5..a9b6754 100644 --- a/templates/closed.html +++ b/templates/closed.html @@ -3,8 +3,9 @@ - Nee... • IsDeFooBarOpen.nl + Nee… • IsDeFooBarOpen.nl +
diff --git a/templates/open.html b/templates/open.html index 96f5345..b5020c0 100644 --- a/templates/open.html +++ b/templates/open.html @@ -4,6 +4,7 @@ JA! • IsDeFooBarOpen.nl + diff --git a/webpack.config.js b/webpack.config.js index 2ad4903..0374e45 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,12 @@ const path = require('path'); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { + plugins: [ + new MiniCssExtractPlugin({ + name: "[name].css", + }) + ], entry: './src/index.js', devtool: "source-map", output: { @@ -12,7 +18,9 @@ module.exports = { rules: [{ test: /\.scss$/, use: [ - "style-loader", // creates style nodes from JS strings + { + loader: MiniCssExtractPlugin.loader, + }, "css-loader?-url", // translates CSS into CommonJS "postcss-loader", // Will run auto-prefixer for compatibility "sass-loader" // compiles Sass to CSS, using Node Sass by default