add:css modules

build/utils.js

@@ -4,6 +4,7 @@ const config = require('../config')
 // const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const packageConfig = require('../package.json')
+const lodash = require('lodash')
 
 exports.assetsPath = function (_path) {
     const assetsSubDirectory = process.env.NODE_ENV === 'production'
@@ -19,7 +20,10 @@ exports.cssLoaders = function (options) {
     const cssLoader = {
         loader: 'css-loader',
         options: {
-            sourceMap: options.sourceMap
+            sourceMap: options.sourceMap,
+            // https://vue-loader.vuejs.org/zh/migrating.html#css-modules
+            modules: true,
+            localIdentName: '[local]---[hash:base64:5]'
         }
     }
 

config/index.js

@@ -56,7 +56,7 @@ module.exports = {
          * Source Maps
          */
 
-        productionSourceMap: true,
+        productionSourceMap: false,
         // https://webpack.js.org/configuration/devtool/#production
         devtool: '#source-map',
 

package.json

@@ -11,6 +11,7 @@
         "build": "node build/build.js"
     },
     "dependencies": {
+        "lodash": "^4.17.11",
         "vue": "^2.5.2",
         "vue-router": "^3.0.1"
     },

src/App.vue

@@ -1,6 +1,8 @@
 <template>
-  <div id="app">
-    <img src="./assets/logo.png">
+  <div :class="$style.app">
+      路由列表：
+      <router-link to='/'>首页</router-link> |
+      <router-link to='/test'>test页面</router-link> |
     <router-view/>
   </div>
 </template>
@@ -11,13 +13,12 @@ export default {
 }
 </script>
 
-<style lang="stylus">
-#app {
+<style lang="stylus" module>
+.app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/router/index.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
 
 Vue.use(Router)
 
@@ -10,7 +9,12 @@ export default new Router({
         {
             path: '/',
             name: 'HelloWorld',
-            component: HelloWorld
+            component: () => import('@/components/HelloWorld.vue')
+        },
+        {
+            path: '/test',
+            name: '',
+            component: () => import('@/views/Test.vue')
         }
     ]
 })

src/views/Test.vue

@@ -0,0 +1,21 @@
+<template>
+    <div :class="$style.blueColor">
+        {{test}}
+    </div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data () {
+        return {
+            test: 'test页面'
+        }
+    }
+}
+</script>
+
+<style lang="stylus" module>
+.blueColor
+    color blue
+</style>