diff --git a/client/css/fontawesome.css b/client/css/fontawesome.css
new file mode 100644
index 00000000..efd11aa1
--- /dev/null
+++ b/client/css/fontawesome.css
@@ -0,0 +1,9 @@
+@font-face {
+ /* We use free solid icons - https://fontawesome.com/icons?s=solid&m=free */
+ font-family: "FontAwesome";
+ font-weight: normal;
+ font-style: normal;
+ src:
+ url("../fonts/fa-solid-900.woff2") format("woff2"),
+ url("../fonts/fa-solid-900.woff") format("woff");
+}
diff --git a/client/css/style.css b/client/css/style.css
index 003bfe34..0c6f9947 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1,12 +1,6 @@
-@font-face {
- /* We use free solid icons - https://fontawesome.com/icons?s=solid&m=free */
- font-family: "FontAwesome";
- font-weight: normal;
- font-style: normal;
- src:
- url("../fonts/fa-solid-900.woff2") format("woff2"),
- url("../fonts/fa-solid-900.woff") format("woff");
-}
+@import "fontawesome.css";
+@import "bootstrap.css";
+@import "../../node_modules/primer-tooltips/build/build.css";
html,
body {
diff --git a/client/index.html.tpl b/client/index.html.tpl
index 40593442..a07584ca 100644
--- a/client/index.html.tpl
+++ b/client/index.html.tpl
@@ -7,8 +7,6 @@
-
-
<% _.forEach(stylesheets, function(css) { %>
diff --git a/package.json b/package.json
index 71f26d63..c6f60ac7 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
"babel-preset-env": "1.6.1",
"chai": "4.1.2",
"copy-webpack-plugin": "4.5.1",
+ "css-loader": "0.28.11",
"css.escape": "1.5.1",
"emoji-regex": "6.5.1",
"eslint": "4.19.1",
@@ -82,6 +83,7 @@
"istanbul-instrumenter-loader": "3.0.1",
"jquery": "3.3.1",
"jquery-ui": "1.12.1",
+ "mini-css-extract-plugin": "0.4.0",
"mocha": "5.0.5",
"mocha-loader": "1.1.3",
"mocha-webpack": "2.0.0-beta.0",
diff --git a/webpack.config.js b/webpack.config.js
index 74d8d532..0771f8de 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,11 +3,13 @@
const webpack = require("webpack");
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
mode: process.env.NODE_ENV === "production" ? "production" : "development",
entry: {
"js/bundle.js": path.resolve(__dirname, "client/js/lounge.js"),
+ "css/style": path.resolve(__dirname, "client/css/style.css"),
},
devtool: "source-map",
output: {
@@ -17,6 +19,22 @@ const config = {
},
module: {
rules: [
+ {
+ test: /\.css$/,
+ include: [
+ path.resolve(__dirname, "client"),
+ ],
+ use: [
+ MiniCssExtractPlugin.loader,
+ {
+ loader: "css-loader",
+ options: {
+ url: false,
+ minimize: process.env.NODE_ENV === "production",
+ },
+ },
+ ],
+ },
{
test: /\.js$/,
include: [
@@ -69,6 +87,7 @@ const config = {
json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
},
plugins: [
+ new MiniCssExtractPlugin(),
new CopyPlugin([
{
from: "./node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.woff*",
@@ -95,14 +114,6 @@ const config = {
from: "./client/themes/*",
to: "themes/[name].[ext]",
},
- { // TODO: Build css with postcss
- from: "./client/css/*",
- to: "css/[name].[ext]",
- },
- {
- from: "./node_modules/primer-tooltips/build/build.css",
- to: "css/primer-tooltips.[ext]",
- },
]),
// socket.io uses debug, we don't need it
new webpack.NormalModuleReplacementPlugin(/debug/, path.resolve(__dirname, "scripts/noop.js")),
diff --git a/yarn.lock b/yarn.lock
index 54bc330a..49e86e21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2095,7 +2095,7 @@ css-color-names@0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-css-loader@^0.28.7:
+css-loader@0.28.11, css-loader@^0.28.7:
version "0.28.11"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
dependencies:
@@ -5030,6 +5030,13 @@ mimic-response@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.0.tgz#df3d3652a73fded6b9b0b24146e6fd052353458e"
+mini-css-extract-plugin@0.4.0:
+ version "0.4.0"
+ resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz#ff3bf08bee96e618e177c16ca6131bfecef707f9"
+ dependencies:
+ loader-utils "^1.1.0"
+ webpack-sources "^1.1.0"
+
minimalistic-assert@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"