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

---
 zh-cn/base.md |  2 +-
 zh-cn/sass.md | 63 +++++++++++++++++++++++++++++++++++----------------
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/zh-cn/base.md b/zh-cn/base.md
index 9b62dd6..c0103a7 100644
--- a/zh-cn/base.md
+++ b/zh-cn/base.md
@@ -20,7 +20,7 @@ module.exports = {
     //  publicPath: '/app/', // 署应用包时的基本 URL。  vue-router history模式使用
     outputDir: 'dist', //  生产环境构建文件的目录
     assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
-    lintOnSave: process.env.NODE_ENV !== IS_PROD,
+    lintOnSave:  !IS_PROD,
     productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
     devServer: {
         port: 9020, // 端口号
diff --git a/zh-cn/sass.md b/zh-cn/sass.md
index 8a1698d..fab2845 100644
--- a/zh-cn/sass.md
+++ b/zh-cn/sass.md
@@ -2,17 +2,7 @@
 
 首先 你可能会遇到 `node-sass` 安装不成功，别放弃多试几次！！！
 
-目录结构，在 `src/assets/css/`文件夹下包含了三个文件
-
-```bash
-├── assets
-│   ├── css
-│   │   ├── index.scss               # 全局通用样式
-│   │   ├── mixin.scss               # 全局mixin
-│   │   └── variables.scss           # 全局变量
-```
-
-每个页面自己对应的样式都写在自己的 .vue 文件之中
+每个页面自己对应的样式都写在自己的 .vue 文件之中 `scoped` 它顾名思义给 css 加了一个域的概念。
 
 ```html
 <style lang="scss">
@@ -24,7 +14,44 @@
 </style>
 ```
 
-`vue.config.js` 配置注入 `sass` 的 `mixin` `variables` 到全局，不需要手动引入 ,配置`$cdn`通过变量形式引入 cdn 地址
+#### 目录结构
+
+vue-h5-template 所有全局样式都在 `@/src/assets/css` 目录下设置
+
+```bash
+├── assets
+│   ├── css
+│   │   ├── index.scss               # 全局通用样式
+│   │   ├── mixin.scss               # 全局mixin
+│   │   └── variables.scss           # 全局变量
+```
+
+#### 自定义 vant-ui 样式
+
+现在我们来说说怎么重写 `vant-ui` 样式。由于 `vant-ui` 的样式我们是在全局引入的，所以你想在某个页面里面覆盖它的样式就不能加 `scoped`，但你又想只覆盖这个页面的 `vant` 样式，你就可在它的父级加一个 `class`，用命名空间来解决问题。
+
+```css
+.about-container {
+    /* 你的命名空间 */
+    .van-button {
+        /* vant-ui 元素*/
+        margin-right: 0px;
+    }
+}
+```
+
+#### 父组件改变子组件样式 深度选择器
+
+当你子组件使用了 `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)
@@ -34,23 +61,21 @@ module.exports = {
         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}";
-          `,
+                @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