一、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