万象更新 Html5 - css: 通过 postcss 编译 css
万象更新 Html5 - css: 通过 postcss 编译 css
示例如下:
css\src\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script src="index.js"></script>
</head>
<body>
<ul>
<li><a href="layout/float/demo1.html">float 布局: 基础</a></li>
<li><a href="layout/float/demo2.html">float 布局: 通过 float 布局实现 3 栏式布局</a></li>
<li><a href="layout/flex/demo1.html">flex 布局: flex-direction, flex-wrap, flex-flow</a></li>
<li><a href="layout/flex/demo2.html">flex 布局: justify-content, align-items, align-content, align-self</a></li>
<li><a href="layout/flex/demo3.html">flex 布局: order, flex-grow, flex-shrink, flex-basis, flex</a></li>
<li><a href="layout/position.html">position 布局: 定位（static, relative, absolute, fixed）</a></li>
<li><a href="layout/overflow.html">overflow 布局: 内容溢出时的样式</a></li>
<li><a href="selector/demo1.html">selector 选择器: 基础，通配符选择器，元素选择器，id 选择器，类选择器</a></li>
<li><a href="selector/demo2.html">selector 选择器: 属性选择器（attribute selector）</a></li>
<li><a href="selector/demo3.html">selector 选择器: 后代选择器，子选择器，相邻兄弟选择器，兄弟选择器</a></li>
<li><a href="selector/demo4.html">selector 选择器: 伪类（pseudo class）</a></li>
<li><a href="selector/demo5.html">selector 选择器: 伪元素（pseudo element）</a></li>
<li><a href="counter.html">counter 计数器</a></li>
<li><a href="iconfont.html">字体图标</a></li>
<li><a href="unit.html">单位 px/em/pt</a></li>
</ul>
<!--本例用于演示如何通过 postcss 编译 css-->
<div class="css1">abc</div>
<div class="css2">xyz</div>
</body>
</html>
css\src\index.js
// 这里导入的 css 会被 rollup.config.js 中配置的 postcss 编译
import './css1.css'
import './css2.css'
css\src\css1.css
/* 本例用于演示如何通过 postcss 编译 css */
.css1 {
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
width: 100px;
height: 100px;
background-color: red;
color: white;
transform: rotate(15deg);
}
css\src\css2.css
/* 本例用于演示如何通过 postcss 编译 css */
.css2 {
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
width: 100px;
height: 100px;
background-color: green;
color: white;
transform: rotate(45deg);
}
css\rollup.config.js
import babel from 'rollup-plugin-babel';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import json from '@rollup/plugin-json';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';
import copy from 'rollup-plugin-copy';
import { resolve as pathResolve } from 'path'
// ./ 代表当前目录
// ../ 代表上级目录
// / 代表根目录
// path.resolve() 用于拼接路径，以及将指定的路径解析为绝对路径
console.log("path1", pathResolve("./css/src/index.js")) // D:\gitroot\Html5\css\src\index.js
console.log("path2", pathResolve("../Html5/css/src/index.js")) // D:\gitroot\Html5\css\src\index.js
console.log("path3", pathResolve("/gitroot/Html5/css/src/index.js")) // D:\gitroot\Html5\css\src\index.js
console.log("path4", pathResolve(__dirname)) // D:\gitroot\Html5\css
console.log("path5", pathResolve(__dirname, `./src/index.js`)) // D:\gitroot\Html5\css\src\index.js
export default {
input: './css/src/index.js', // 需要编译的 js 的入口文件
output: {
name: 'html5_css', // 这个名字要写，不然有的时候编译会有警告
file: './css/dist/index.js', // 编译后的 js 文件的保存地址
format: 'iife', // 编译格式，另外还有 umd，cjs, es 之类的
sourcemap: true, // 启用源代码映射，以便通过源码调试
},
plugins: [
// 用于解决类似 Unresolved dependencies 或者 'xxx' is imported by ***.js, but could not be resolved – treating it as an external dependency 之类的警告
nodeResolve(),
// 用于将 json 转换为 es6
json(),
// 用于将 commonjs 转换为 es6（比如，如果你的代码中有 require 的话，那么这是不能在浏览器中运行的，此时就可以用这个插件可转换一下）
commonjs({
sourceMap: false // 不用生成源映射（源映射用于保存源代码与编译后代码的映射关系，从而方便定位代码）
}),
// 更多配置参见 .babelrc 文件
babel({
// * 匹配当前目录下的所有文件和一级子目录，但不包括这些一级子目录下的内容
// ** 匹配当前目录下的所有子目录和文件，包括任意层级的子目录和文件
exclude: './node_modules/**' // 不转换 node_modules 中的代码
}),
// 用于编译 css（需要支持的浏览器会从 package.json 中的 browserslist 配置读取）
// 注：input 的 js 文件中的 import 的 css 会被此处的 postcss 编译
postcss({
plugins: [autoprefixer], // 启用 postcss 的 autoprefixer 插件
minimize: false, // 是否压缩 css
extract: pathResolve(__dirname, `./dist/css.css`) // 编译后的 css 的保存路径
}),
// 复制文件
copy({
targets: [
{ src: './css/src/*', dest: './css/dist', ignore: ['./css/src/css1.css', './css/src/css2.css'] }
]
})
]
}
