From 7a6ee960445f37dc7b53233b86845dcd25da8d5b Mon Sep 17 00:00:00 2001
From: sunnie <406803045@qq.com>
Date: Tue, 2 Jun 2020 13:40:47 +0800
Subject: [PATCH] sass

---
 README.md                | 95 +++++++++++++++++++++++++---------------
 src/views/home/about.vue |  7 ++-
 2 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index 986def5..f6cdcb3 100644
--- a/README.md
+++ b/README.md
@@ -269,7 +269,21 @@ Vue.use(Tabbar).use(TabbarItem)
 
 首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
 
-目录结构，在 `src/assets/css/`文件夹下包含了三个文件
+每个页面自己对应的样式都写在自己的 .vue 文件之中 `scoped` 它顾名思义给 css 加了一个域的概念。
+
+```html
+<style lang="scss">
+    /* global styles */
+</style>
+
+<style lang="scss" scoped>
+    /* local styles */
+</style>
+```
+
+#### 目录结构
+
+vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
 
 ```bash
 ├── assets
@@ -279,45 +293,56 @@ Vue.use(Tabbar).use(TabbarItem)
 │   │   └── variables.scss           # 全局变量
 ```
 
-每个页面自己对应的样式都写在自己的 .vue 文件之中
+#### 自定义 vant-ui 样式
 
-```html
-<style lang="scss">
-  /* global styles */
-</style>
+现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的，所以你想在某个页面里面覆盖它的样式就不能加 `scoped`，但你又想只覆盖这个页面的 `vant` 样式，你就可在它的父级加一个 `class`，用命名空间来解决问题。
 
-<style lang="scss" scoped>
-  /* local styles */
-</style>
+```css
+.about-container {
+    /* 你的命名空间 */
+    .van-button {
+        /* vant-ui 元素*/
+        margin-right: 0px;
+    }
+}
 ```
 
-`vue.config.js` 配置注入 `sass` 的 `mixin` `variables` 到全局，不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址
+#### 父组件改变子组件样式 深度选择器
+
+当你子组件使用了 `scoped` 但在父组件又想修改子组件的样式可以 通过 `>>>` 来实现：
+
+```css
+<style scoped>
+.a >>> .b { /* ... */ }
+</style>
+```
+#### 全局变量
+
+`vue.config.js` 配置使用 `css.loaderOptions` 选项,注入 `sass` 的 `mixin` `variables` 到全局，不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量：
 
 ```javascript
 const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
 const defaultSettings = require('./src/config/index.js')
 module.exports = {
-  css: {
-    extract: IS_PROD,
-    sourceMap: false,
-    loaderOptions: {
-      scss: {
-        // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
-        // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
-        prependData: `
-          @import "assets/css/mixin.scss";
-          @import "assets/css/variables.scss";
-          $cdn: "${defaultSettings.$cdn}";
-          `
-      }
-    }
-  }
+    css: {
+        extract: IS_PROD,
+        sourceMap: false,
+        loaderOptions: {
+            // 给 scss-loader 传递选项
+            scss: {
+                // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
+                // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
+                prependData: `
+                @import "assets/css/mixin.scss";
+                @import "assets/css/variables.scss";
+                $cdn: "${defaultSettings.$cdn}";
+                 `,
+            },
+        },
+    },
 }
 ```
 
-在 `main.js` 中引用全局样式（发现在上面的，prependData 里设置`@import "assets/css/index.scss";`并没有应用全局样式这里在
-main.js 引入）
-
 设置 js 中可以访问 `$cdn`,`.vue` 文件中使用`this.$cdn`访问
 
 ```javascript
@@ -326,7 +351,7 @@ import '@/assets/css/index.scss'
 
 // 设置 js中可以访问 $cdn
 // 引入cdn
-import {$cdn} from '@/config'
+import { $cdn } from '@/config'
 Vue.prototype.$cdn = $cdn
 ```
 
@@ -334,14 +359,14 @@ Vue.prototype.$cdn = $cdn
 
 ```html
 <script>
-  console.log(this.$cdn)
+    console.log(this.$cdn)
 </script>
 <style lang="scss" scoped>
-  .logo {
-    width: 120px;
-    height: 120px;
-    background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
-  }
+    .logo {
+        width: 120px;
+        height: 120px;
+        background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
+    }
 </style>
 ```
 
diff --git a/src/views/home/about.vue b/src/views/home/about.vue
index 7ca0bfd..6a5c02c 100644
--- a/src/views/home/about.vue
+++ b/src/views/home/about.vue
@@ -59,8 +59,9 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 .about-container {
+  /* 你的命名空间 */
   background: #fff;
   height: 100vh;
   box-sizing: border-box;
@@ -87,6 +88,10 @@ export default {
         a {
           text-decoration: underline;
         }
+        .van-button {
+          /* vant-ui 元素*/
+          background: #ff5500;
+        }
       }
 
       .logo {