CSS-Modules(好像跟現在的專案還有關係呢), PostCSS (未完)

 http://www.ruanyifeng.com/blog/2016/06/css_modules.html

https://github.com/postcss/autoprefixer

https://github.com/postcss/postcss

https://cythilya.github.io/2018/08/10/postcss/

未看

https://github.com/postcss/autoprefixer

https://github.com/postcss/postcss

https://cythilya.github.io/2018/08/10/postcss/

定制哈希类名：

CSS Modules: localIdentName=[path][name]---[local]---[hash:base64:5]

呈現: <h1 class="demo03-components-App---title---XSDrm">Hello World</h1>

意思是: 資料夾位置 /demo03/components 下的App.vue---local css name 為title---hash取5個字

v.s.

現行專案: localIdentName: "[name]__[local]__[hash:base64:5]"

呈現: <div class="HeaderSearchDropDownMenu__headerSearchDropDownMenu__TfL4d>Hello World</div>

意思是: HeaderSearchDropDownMenu.vue__local css name 為headerSearchDropDownMenu__hash取5個字

學習概要：

1. CSS-Modules
2. 哈希字符串
3. composes
4. :global
   :local
5. PostCSS -- 後處理器
   step1: npm install postcss postcss-loader autoprefixer precss --save-dev
   step2: 在 Webpack 設定檔加入 postcss-loader

        step3: 在 PostCSS 設定檔（postcss.config.js）加入需要用到的套件 precss 和 autoprefixer。小提醒，擴充功能都要列在 PostCSS 設定檔中才能使用噢。

        其功能由所掛的擴充而定，可加入的plugin功能有：

• autoprefixer : 加入各家瀏覽器的前綴詞（prefix），例如：-webkit-、-moz-。
• 將先進的功能轉為目前主流瀏覽器所能支援的語法。
• 語法檢查和報錯。
• 支援 Grid System。
• precss : 使用類似 SASS 的功能，例如：變數。
• postcss-modules：產生 CSS Modules / Scoped CSS
  
  因為plugin體積小，所以處理速度較預處理器(SASS，LESS等)快。而缺點就是必須自己研究和測試，找出符合需求、仍在維護的 plugin，這是比較花時間的。

    6. Precss
        https://www.jianshu.com/p/cc2386eb9a33

    7. stylelint
        https://stylelint.io/
        https://dotblogs.com.tw/explooosion/2018/09/30/141005