PostCSS

525c1841 · shangbj · cf646622 · 525c1841 · 525c1841 · 525c1841
Commit 525c1841 authored Jun 10, 2018 by shangbj
9 changed files
--- a/3-5使用PostCSS/README.md
+++ b/3-5使用PostCSS/README.md
+### PostCSS
+
+在PostCSS启动时，会从目录下的 postcss.config.js 文件中读取所需的配置，其中postcss-cssnext插件可以让我们使用下一代CSS语法编写代码，再通过PostCSS转换成目前浏览器可识别的 CSS，并且该插件包含为CSS自动添加前缀功能。
\ No newline at end of file
--- a/3-5使用PostCSS/index.html
+++ b/3-5使用PostCSS/index.html
+<html>
+    <head>
+        <meta charset="UTF-8">
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="./dist/bundle.js"></script>
+    </body>
+</html>
\ No newline at end of file
--- a/3-5使用PostCSS/main.css
+++ b/3-5使用PostCSS/main.css
+:root{
+    --red:#d33;
+}
+
+#app{
+    color:var(--red);
+    display:flex;
+}
\ No newline at end of file
--- a/3-5使用PostCSS/main.js
+++ b/3-5使用PostCSS/main.js
+require('./main.css');
+
+const show = require('./show');
+
+show('PostCSS')
\ No newline at end of file
--- a/3-5使用PostCSS/package-lock.json
+++ b/3-5使用PostCSS/package-lock.json
--- a/3-5使用PostCSS/package.json
+++ b/3-5使用PostCSS/package.json
+{
+  "name": "3-5",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack --mode development"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^0.28.11",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-loader": "^2.1.5",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.3"
+  }
+}
--- a/3-5使用PostCSS/postcss.config.js
+++ b/3-5使用PostCSS/postcss.config.js
+module.exports = {
+    plugins: [
+      // 需要使用的插件列表
+      require('postcss-cssnext'),
+    ]
+  }
+  
\ No newline at end of file
--- a/3-5使用PostCSS/show.js
+++ b/3-5使用PostCSS/show.js
+function show(txt){
+    document.getElementById("app").innerText = "hello,"+txt;
+}
+
+module.exports = show;
\ No newline at end of file
--- a/3-5使用PostCSS/webpack.config.js
+++ b/3-5使用PostCSS/webpack.config.js
+const path = require('path');
+
+module.exports = {
+    entry:'./main.js',
+    output: {
+        filename:'bundle.js',
+        path: path.resolve(__dirname,"./dist")
+    },
+    module:{
+        rules:[
+            {
+                test: /\.css$/,
+                use:['style-loader','css-loader','postcss-loader']
+            }
+        ]
+    }
+}
\ No newline at end of file