第二步：在 webpack.config.js 的 css 的 loader 里配置 postcss-loader 。
第三步：配置 postcss.config.js ，然后配置 postcss-preset-env 插件，用来读取 package.json 文件中的 browserslist 配置。
第四步：在 package.json 文件添加 browserslist ，配置需要支持哪些浏览器。
压缩 css 需要用到 optimize-css-assets-webpack-plugin 。
用法很简单，引入插件之后，在 plugins 中实例化即可。
有三种方法：行内样式 直接在标签里面添加style属性，在style属性里面写样式即可；
内部样式 在<head>标签里面通过<style>标签来写入内部样式；
外部样式 通过<link>标签引入外部样式表。
直接在标签内设置、在html内部定义style、和导入css文件三种方式。导入css文件可以使用link标签，或者@import关键字。
两者区别（复制粘贴）：
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
