Extract CSS to a file.

This commit is contained in:
2019-03-14 15:10:49 +01:00
parent 8f5692be43
commit dd05de6764
6 changed files with 14 additions and 14 deletions

View File

@@ -13,6 +13,7 @@
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.4.9", "autoprefixer": "^9.4.9",
"css-loader": "^2.1.0", "css-loader": "^2.1.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0", "node-sass": "^4.11.0",
"postcss": "^7.0.14", "postcss": "^7.0.14",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",

View File

@@ -33,7 +33,7 @@ body.closed {
height: 100%; height: 100%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url(stop.svg); background-image: url(/stop.svg);
background-position: 50% 50%; background-position: 50% 50%;
} }
} }

View File

@@ -1,15 +1,4 @@
// Styles for the "Open" page // Styles for the "Open" page
@keyframes starrotation {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
100% {
transform: rotate(360deg);
}
}
body.open { body.open {
background-color: #a3d165; background-color: #a3d165;

View File

@@ -3,8 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="creator" value="Genetic Lifeform and Beer Operating System - GLaBOS"> <meta name="creator" value="Genetic Lifeform and Beer Operating System - GLaBOS">
<title>Nee... &bull; IsDeFooBarOpen.nl</title> <title>Nee &bull; IsDeFooBarOpen.nl</title>
<script src="generated/bundle.js"></script> <script src="generated/bundle.js"></script>
<link rel="stylesheet" href="generated/main.css">
</head> </head>
<body class="closed"> <body class="closed">
<div id="stop-overlay"> <div id="stop-overlay">

View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="creator" value="Genetic Lifeform and Beer Operating System - GLaBOS"> <meta name="creator" value="Genetic Lifeform and Beer Operating System - GLaBOS">
<title>JA! &bull; IsDeFooBarOpen.nl</title> <title>JA! &bull; IsDeFooBarOpen.nl</title>
<link rel="stylesheet" href="generated/main.css">
<script src="generated/bundle.js"></script> <script src="generated/bundle.js"></script>
</head> </head>
<body class="open"> <body class="open">

View File

@@ -1,6 +1,12 @@
const path = require('path'); const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = { module.exports = {
plugins: [
new MiniCssExtractPlugin({
name: "[name].css",
})
],
entry: './src/index.js', entry: './src/index.js',
devtool: "source-map", devtool: "source-map",
output: { output: {
@@ -12,7 +18,9 @@ module.exports = {
rules: [{ rules: [{
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
"style-loader", // creates style nodes from JS strings {
loader: MiniCssExtractPlugin.loader,
},
"css-loader?-url", // translates CSS into CommonJS "css-loader?-url", // translates CSS into CommonJS
"postcss-loader", // Will run auto-prefixer for compatibility "postcss-loader", // Will run auto-prefixer for compatibility
"sass-loader" // compiles Sass to CSS, using Node Sass by default "sass-loader" // compiles Sass to CSS, using Node Sass by default