Load styles from vue components, fix hot reload

Fixes #3615
This commit is contained in:
Richard Lewis 2020-01-07 23:09:05 +02:00 committed by Pavel Djundik
parent 79cbe63067
commit 23ac0fef32
3 changed files with 26 additions and 4 deletions

View File

@ -9,6 +9,10 @@
</div>
</template>
<style>
@import "../css/style.css";
</style>
<script>
const constants = require("../js/constants");
import Mousetrap from "mousetrap";

View File

@ -13,6 +13,19 @@ module.exports = (app) => {
"webpack-hot-middleware/client?path=storage/__webpack_hmr"
);
// Enable hot module reload support in mini-css-extract-plugin
for (const rule of webpackConfig.module.rules) {
if (!Array.isArray(rule.use)) {
continue;
}
for (const use of rule.use) {
if (use.options && typeof use.options.hmr !== "undefined") {
use.options.hmr = true;
}
}
}
const compiler = webpack(webpackConfig);
app.use(

View File

@ -11,7 +11,6 @@ const config = {
mode: process.env.NODE_ENV === "production" ? "production" : "development",
entry: {
"js/bundle.js": [path.resolve(__dirname, "client/js/vue.js")],
"css/style": path.resolve(__dirname, "client/css/style.css"),
},
devtool: "source-map",
output: {
@ -37,9 +36,13 @@ const config = {
},
{
test: /\.css$/,
include: [path.resolve(__dirname, "client")],
use: [
MiniCssExtractPlugin.loader,
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: false,
},
},
{
loader: "css-loader",
options: {
@ -83,8 +86,10 @@ const config = {
json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
},
plugins: [
new MiniCssExtractPlugin(),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "css/style.css",
}),
new CopyPlugin([
{
from: "./node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff*",