feat(autoprefixer): css 自动添加前缀

luoxue-victor · Nov 20, 2019 · 4e88451 · 4e88451
1 parent 53616f8
commit 4e88451
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,18 +3,19 @@
 ### 🌟 新功能
 
 * **课题2：** 完成基本构建，js、css打包进html，实现dev跟build环境 ([71a6a19](https://github.com/luoxue-victor/learn_webpack/commit/71a6a19))
+* **新增loader配置：** 增加ts、css、less、sass、postcss、babel配置 ([53616f8](https://github.com/luoxue-victor/learn_webpack/commit/53616f8))
 * **修改了配置文件：** i feat a config ([382c60c](https://github.com/luoxue-victor/learn_webpack/commit/382c60c))
 * **all：** 初始化一个项目 ([336cc13](https://github.com/luoxue-victor/learn_webpack/commit/336cc13))
 * **asdasdasdas：** 你爱哈的 ([ea12f9c](https://github.com/luoxue-victor/learn_webpack/commit/ea12f9c))
 * **config：** add config  option ([83c9f1e](https://github.com/luoxue-victor/learn_webpack/commit/83c9f1e))
 * **daasd：** asdasd ([0b6ee85](https://github.com/luoxue-victor/learn_webpack/commit/0b6ee85))
-* **feat：** aaaaa ([73abf42](https://github.com/luoxue-victor/learn_webpack/commit/73abf42))
+* **feat：** asdada ([64090c7](https://github.com/luoxue-victor/learn_webpack/commit/64090c7))
 * **init：** 项目初始化 ([d7835fb](https://github.com/luoxue-victor/learn_webpack/commit/d7835fb))
 * **webpack：** webpack配置 ([9a1d29c](https://github.com/luoxue-victor/learn_webpack/commit/9a1d29c))
 * 你好 ([6e534da](https://github.com/luoxue-victor/learn_webpack/commit/6e534da))
 * asasdasasd ([8f9515f](https://github.com/luoxue-victor/learn_webpack/commit/8f9515f))
 * asd ([d278787](https://github.com/luoxue-victor/learn_webpack/commit/d278787))
-* **feat：** asdada ([64090c7](https://github.com/luoxue-victor/learn_webpack/commit/64090c7))
+* **feat：** aaaaa ([73abf42](https://github.com/luoxue-victor/learn_webpack/commit/73abf42))
 
 
 ### 🐛 Bug 修复

diff --git a/README.md b/README.md
@@ -606,4 +606,54 @@ dist/app.css
   background: green;
   height: 26.66667vw;
 }
+```
+
+### 配置 autoprefixer
+
+自动添加 css 前缀
+
+postcss.config.js
+
+```js
+module.exports = {
+  plugins: {
+    autoprefixer: {
+      overrideBrowserslist: [
+        '> 1%',
+        'last 3 versions',
+        'iOS >= 8',
+        'Android >= 4',
+        'Chrome >= 40'
+      ]
+    }
+  }
+}
+```
+
+效果
+
+``` css
+/* index.css */
+.test {
+  width: 200px;
+  height: 200px;
+  color: red;
+  display: flex;
+  background-color: orange;
+}
+```
+转换后
+
+``` css
+/* index.css */
+.test {
+  width: 26.66667vw;
+  height: 26.66667vw;
+  color: red;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  background-color: orange;
+}
 ```
diff --git a/dist/app.css b/dist/app.css
@@ -3,6 +3,10 @@
   width: 26.66667vw;
   height: 26.66667vw;
   color: red;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   background-color: orange;
 }
 /* app.css */

diff --git a/package.json b/package.json
@@ -35,7 +35,6 @@
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
     "ora": "^4.0.3",
-    "postcss-loader": "^3.0.0",
     "rimraf": "^3.0.0",
     "sass": "^1.23.7",
     "sass-loader": "^8.0.0",
@@ -44,6 +43,7 @@
     "webpack-dashboard": "^3.2.0"
   },
   "devDependencies": {
+    "autoprefixer": "^9.7.2",
     "commitizen": "^4.0.3",
     "commitlint": "^8.2.0",
     "conventional-changelog-cli": "^2.0.28",
@@ -52,6 +52,7 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.1.0",
     "mini-css-extract-plugin": "^0.8.0",
+    "postcss-loader": "^3.0.0",
     "postcss-px-to-viewport": "^1.1.1",
     "vue-cli-plugin-commitlint": "^1.0.4",
     "webpack-chain": "^6.0.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,14 @@
 module.exports = {
   plugins: {
+    autoprefixer: {
+      overrideBrowserslist: [
+        '> 1%',
+        'last 3 versions',
+        'iOS >= 8',
+        'Android >= 4',
+        'Chrome >= 40'
+      ]
+    },
     'postcss-px-to-viewport': {
       unitToConvert: 'px',
       viewportWidth: 750,

diff --git a/src/style/index.css b/src/style/index.css
@@ -3,5 +3,6 @@
   width: 200px;
   height: 200px;
   color: red;
+  display: flex;
   background-color: orange;
 }