Css模块
CSS 的隔离主要有两类方案，一类是运行时的通过命名区分，一类是编译时的自动转换 CSS，添加上模块唯一标识。
1.运行时
运行时的方案最典型的就是 BEM，它是通过 .block__element–modifier 这种命名规范来实现的样式隔离，不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的。
但是这种方案毕竟不是强制的，还是有样式冲突的隐患。
2.编译时
编译时的方案有两种，一种是 scoped，一种是 css modules（还有Css in Js）。
- scoped 是 vue-loader 支持的方案，它是通过编译的方式在元素上添加了 data-xxx 的属性，然后给 css 选择器加上[data-xxx] 的属性选择器的方式实现 css 的样式隔离。
- css-modules 是 css-loader 支持的方案，在 vue、react 中都可以用，它是通过编译的方式修改选择器名字为全局唯一的方式来实现 css 的样式隔离。
- scoped 的方案是添加的 data-xxx 属性选择器，因为 data-xx 是编译时自动生成和添加的，开发者感受不到。
- css-modules 的方案是修改 class、id 等选择器的名字，那组件里就要通过 styles.xx 的方式引用这些编译后的名字，开发者是能感受到的。但是也有好处，配合编辑器可以做到智能提示。
PostCss
参考资料
https://blog.csdn.net/JunChow520/article/details/117020367
1.PostCss简介
- PostCSS是一款使用JavaScript插件对CSS实现转换的工具
- PostCSS拥有非常强大的插件，典型的比如autoprefixer、cssnext、css modules等。
- PostCSS插件的处理方式类似CSS预处理器，而非预处理器和后处理器。
- PostCSS并非优化CSS的工具，语法也并非CSS的新式语法。
Github：https://github.com/postcss/postcss#usage
2.vite中使用
Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中。可直接配置css.postcss选项即可。Vite将自动在*.vue文件中所有的style标签以及所有导入的.css文件中应用PostCSS.
API列表：https://postcss.org/api/
代码语言：javascript复制import postcssPxtorem from "postcss-pxtorem";
import autoprefixer from 'autoprefixer'
export default {
//样式表插件
css: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions", // 所有主流浏览器最近10版本用
],
grid: true,
}),
postcssPxtorem({
rootValue: 37.5,
propList: ['*'],
unitPrecision: 5
})
]
}
}
}3.相关插件
3.1 autoprefixer
autoprefixer用于自动添加css产商前缀；
代码语言：javascript复制$ npm install autoprefixer --save-dev项目地址
https://github.com/postcss/autoprefixer
3.2 postcsspxtoviewport
代码语言：javascript复制$ npm install postcss-px-to-viewport --save-devpostcsspxtoviewport可以将CSS中的px单位转化为vw，1vw等于1/100视口宽度。
代码语言：javascript复制{
unitToConvert: 'px',//需要转换的单位，默认为"px"
viewportWidth: 320,//设计稿的视口宽度
unitPrecision: 5,//单位转换后保留的精度
propList: ['*'],//能转化为vw的属性列表,支持*和!字符
viewportUnit: 'vw',//希望使用的视口单位
fontViewportUnit: 'vw',//字体使用的视口单位
selectorBlackList: [],//需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。可以使正则表达式，普通字符默认是包含匹配
minPixelValue: 1,//设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false,//媒体查询里的单位是否需要转换单位
replace: true,//是否直接更换属性值，而不添加备用属性
/*exclude和include是可以一起设置的，将取两者规则的交集。*/
exclude: undefined,//正则字符或者数组，忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
include: undefined,/正则或者数组，只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文
landscape: false,//是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: 'vw',//横屏时使用的单位
landscapeWidth: 568 //横屏时使用的单位
} 3.3 pxtorem
代码语言：javascript复制npm install postcss-pxtorem --save-devpostcss-pxtorem 可以将CSS中的px单位转化为rem。
代码语言：javascript复制{
rootValue: 16,
unitPrecision: 5,
propList: ['font', 'font-size', 'line-height', 'letter-spacing'],//能转化为vw的属性列表,支持*和!字符
selectorBlackList: [],//需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。可以使正则表达式，普通字符默认是包含匹配
replace: true,
mediaQuery: false, //允许在媒体查询中转换 px。
minPixelValue: 0,
exclude: /node_modules/i
}
