feat: update mini-css-extract-plugin to support hmr

also added an example for extracting css
saberland · Sep 25, 2019 · fb28324 · fb28324
1 parent 55f2f34
commit fb28324
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 2 deletions.
diff --git a/examples/extract-css/README.md b/examples/extract-css/README.md
@@ -0,0 +1,12 @@
+# extract-css
+
+Extract CSS into standalone files.
+
+## How to run
+
+```bash
+git clone https://github.com/saberland/saber.git --single-branch
+cd saber/examples/extract-css
+yarn
+yarn dev
+```
diff --git a/examples/extract-css/css/global.css b/examples/extract-css/css/global.css
@@ -0,0 +1,3 @@
+body {
+  background: red;
+}
diff --git a/examples/extract-css/package.json b/examples/extract-css/package.json
@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "extract-css",
+  "description": "Extract CSS from your Saber app",
+  "scripts": {
+    "dev": "saber",
+    "build": "saber build"
+  },
+  "dependencies": {
+    "saber": "^0.9.1"
+  }
+}
diff --git a/examples/extract-css/pages/about.vue b/examples/extract-css/pages/about.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>About</h1>
+    <saber-link to="/">Home</saber-link>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-style: italic;
+  font-size: 2rem;
+}
+</style>
diff --git a/examples/extract-css/pages/index.vue b/examples/extract-css/pages/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>Home</h1>
+    <saber-link :to="$saber.getPageLink('about.vue')">About</saber-link>
+  </div>
+</template>
diff --git a/examples/extract-css/saber-browser.js b/examples/extract-css/saber-browser.js
@@ -0,0 +1 @@
+import './css/global.css'
diff --git a/examples/extract-css/saber-config.js b/examples/extract-css/saber-config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  build: {
+    extractCSS: true
+  }
+}
diff --git a/packages/saber/lib/plugins/config-css.js b/packages/saber/lib/plugins/config-css.js
@@ -41,6 +41,12 @@ exports.apply = api => {
           rule
             .use('extract-css-loader')
             .loader(require('mini-css-extract-plugin').loader)
+            .options({
+              // only enable hot in development
+              hmr: process.env.NODE_ENV === 'development',
+              // if hmr does not work, this is a forceful method.
+              reloadAll: true
+            })
         } else {
           rule
             .use('vue-style-loader')

diff --git a/packages/saber/package.json b/packages/saber/package.json
@@ -40,7 +40,7 @@
     "joycon": "^2.2.4",
     "lodash.merge": "^4.6.1",
     "log-update": "^3.2.0",
-    "mini-css-extract-plugin": ">=0.7.0",
+    "mini-css-extract-plugin": "^0.8.0",
     "normalize-repo": "^1.0.0",
     "object-assign": "^4.1.1",
     "open": "^6.4.0",

diff --git a/yarn.lock b/yarn.lock
@@ -8608,7 +8608,7 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
-mini-css-extract-plugin@>=0.7.0:
+mini-css-extract-plugin@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
   integrity sha512-MNpRGbNA52q6U92i0qbVpQNsgk7LExy41MdAlG84FeytfDOtRIf/mCHdEgG8rpTKOaNKiqUnZdlptF469hxqOw==