Add css-loader

This commit is contained in:
Pavel Djundik 2018-03-21 14:13:52 +02:00
parent d6e6dab565
commit c28a5c25b9
6 changed files with 41 additions and 20 deletions

9
client/css/fontawesome.css vendored Normal file
View File

@ -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");
}

View File

@ -1,12 +1,6 @@
@font-face { @import "fontawesome.css";
/* We use free solid icons - https://fontawesome.com/icons?s=solid&m=free */ @import "bootstrap.css";
font-family: "FontAwesome"; @import "../../node_modules/primer-tooltips/build/build.css";
font-weight: normal;
font-style: normal;
src:
url("../fonts/fa-solid-900.woff2") format("woff2"),
url("../fonts/fa-solid-900.woff") format("woff");
}
html, html,
body { body {

View File

@ -7,8 +7,6 @@
<link rel="preload" as="script" href="js/bundle.vendor.js"> <link rel="preload" as="script" href="js/bundle.vendor.js">
<link rel="preload" as="script" href="js/bundle.js"> <link rel="preload" as="script" href="js/bundle.js">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/primer-tooltips.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link id="theme" rel="stylesheet" href="themes/<%- theme %>.css" data-server-theme="<%- theme %>"> <link id="theme" rel="stylesheet" href="themes/<%- theme %>.css" data-server-theme="<%- theme %>">
<% _.forEach(stylesheets, function(css) { %> <% _.forEach(stylesheets, function(css) { %>

View File

@ -71,6 +71,7 @@
"babel-preset-env": "1.6.1", "babel-preset-env": "1.6.1",
"chai": "4.1.2", "chai": "4.1.2",
"copy-webpack-plugin": "4.5.1", "copy-webpack-plugin": "4.5.1",
"css-loader": "0.28.11",
"css.escape": "1.5.1", "css.escape": "1.5.1",
"emoji-regex": "6.5.1", "emoji-regex": "6.5.1",
"eslint": "4.19.1", "eslint": "4.19.1",
@ -82,6 +83,7 @@
"istanbul-instrumenter-loader": "3.0.1", "istanbul-instrumenter-loader": "3.0.1",
"jquery": "3.3.1", "jquery": "3.3.1",
"jquery-ui": "1.12.1", "jquery-ui": "1.12.1",
"mini-css-extract-plugin": "0.4.0",
"mocha": "5.0.5", "mocha": "5.0.5",
"mocha-loader": "1.1.3", "mocha-loader": "1.1.3",
"mocha-webpack": "2.0.0-beta.0", "mocha-webpack": "2.0.0-beta.0",

View File

@ -3,11 +3,13 @@
const webpack = require("webpack"); const webpack = require("webpack");
const path = require("path"); const path = require("path");
const CopyPlugin = require("copy-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = { const config = {
mode: process.env.NODE_ENV === "production" ? "production" : "development", mode: process.env.NODE_ENV === "production" ? "production" : "development",
entry: { entry: {
"js/bundle.js": path.resolve(__dirname, "client/js/lounge.js"), "js/bundle.js": path.resolve(__dirname, "client/js/lounge.js"),
"css/style": path.resolve(__dirname, "client/css/style.css"),
}, },
devtool: "source-map", devtool: "source-map",
output: { output: {
@ -17,6 +19,22 @@ const config = {
}, },
module: { module: {
rules: [ 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$/, test: /\.js$/,
include: [ include: [
@ -69,6 +87,7 @@ const config = {
json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin(),
new CopyPlugin([ new CopyPlugin([
{ {
from: "./node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.woff*", from: "./node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.woff*",
@ -95,14 +114,6 @@ const config = {
from: "./client/themes/*", from: "./client/themes/*",
to: "themes/[name].[ext]", 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 // socket.io uses debug, we don't need it
new webpack.NormalModuleReplacementPlugin(/debug/, path.resolve(__dirname, "scripts/noop.js")), new webpack.NormalModuleReplacementPlugin(/debug/, path.resolve(__dirname, "scripts/noop.js")),

View File

@ -2095,7 +2095,7 @@ css-color-names@0.0.4:
version "0.0.4" version "0.0.4"
resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" 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" version "0.28.11"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.11.tgz#c3f9864a700be2711bb5a2462b2389b1a392dab7"
dependencies: dependencies:
@ -5030,6 +5030,13 @@ mimic-response@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.0.tgz#df3d3652a73fded6b9b0b24146e6fd052353458e" 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: minimalistic-assert@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"