一、css之上的語言
js之上的語言有jsx、tyepscript、coffescript。 html之上的語言有jade。 css之上的語言有sass、scss、less、stylus，這幾種語言區別其實不大，完全不需要糾結到底用那個。
css的缺點：
- 語法不夠強大，不能夠嵌套書寫，不利於模塊化開發
- 沒有變量和邏輯上的復用機制，導致在css的屬性值中只能使用字面量形式，以及不斷重復書寫重復的樣式，導致難以維護。
css預編譯語言的特點：
-
可以使用變量：就像其他編程語言一樣，免於多處修改。
Sass：使用$對變量進行聲明，變量名和變量值使用冒號進行分割
Less：使用@對變量進行聲明
Stylus：中聲明變量沒有任何限定，結尾的分號可有可無，但變量名和變量值之間必須要有『等號』。 -
作用域：有了變量，就必須得有作用域進行管理。就想js一樣，它會從局部作用域開始往上查找變量。 Sass：它的方式是三者中最差的，不存在全局變量的概念
Less：它的方式和js比較相似，逐級往上查找變量
Stylus：它的方式和Less比較相似，但是它和Sass一樣更傾向於指令式查找 -
嵌套：對於css來說，有嵌套的寫法無疑是完美的，更像是父子層級之間明確關系
postcss並不是一種預處理語言，而是一套插件系統，很多人認為postcss是css的未來。
二、使用lessc命令進行編譯
原始的css已經足夠優美了，想想開發桌面應用時我們是如何定義控件樣式的，通過指令形式指定控件樣式更加繁瑣。 css之上的語言差別不大，我選less。npm install -g less less-loader 安裝完成之后，使用lessc命令就可以編譯less文件了。
三、使用extract-text-webpack-plugin插件自動提取css文件
為什么要把css文件單獨出去
如果不單獨出去，頁面加載js會比較慢，用戶會看到css加載之前的內容，頁面比較丑陋。頁面先加載css，再渲染html，最后才執行js。把css作為單獨的link標簽能夠使頁面加載時更加美觀。
配置
webpack.config.js
var p = require('path')
var process = require('process')
var NODE_PATH=process.env['NODE_PATH']
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
mode: 'development',
entry: { "main.js": "./index.js" },
output: { filename: '[name]' },
module: {
rules:[
{ test:/\.less$/, use:ExtractTextPlugin.extract({ use:['css-loader','less-loader'] }) }
]
},
resolve:{ modules:[NODE_PATH] },
resolveLoader: { modules: [NODE_PATH] },
plugins: [ new ExtractTextPlugin("custom.css"), ]
}
上面的配置中，通過resolve.modules設置尋找模塊的路徑，使用resolveLoader設置尋找loader的路徑，這種方式在使用webpack-dev-server時可能會有問題，最佳方式是建立一個node_modules軟連接，把NODE_PATH鏈接到當前文件夾。
可能遇到的問題
plain Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
extract-text-webpack-plugin這個插件目前不支持webpack 4.0，而npm倉庫中默認安裝的是適用於webpack3.0的插件，解決方案是直接使用下一代extract-text-webpack-plugin插件：
npm install -g extract-text-webpack-plugin@next
參考資料
webpack官網extract-text-webpack插件介紹
https://www.webpackjs.com/plugins/extract-text-webpack-plugin/
關於postcss https://segmentfault.com/a/1190000011595620
npm extract-text-webpack插件
https://www.npmjs.com/package/extract-text-webpack-plugin