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 1.PostCss简介
PostCSS是一款使用JavaScript插件对CSS实现转换的工具 PostCSS拥有非常强大的插件，典型的比如autoprefixer、cssnext、css modules等。 PostCSS插件的处理方式类似CSS预处理器，而非预处理器和后处理器。 PostCSS并非优化CSS的工具，语法也并非CSS的新式语法。
2.vite中使用 Vite自身已经集成PostCSS，无需再次安装。另外也无需单独创建PostCSS配置文件，已集成到vite.config.js的css选项中。可直接配置css.postcss选项即可。Vite将自动在*.vue文件中所有的style标签以及所有导入的.css文件中应用PostCSS.
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产商前缀；
$ npm install autoprefixer –save-dev
3.2 postcsspxtoviewport $ npm install postcss-px-to-viewport –save-dev
postcsspxtoviewport可以将CSS中的px单位转化为vw，1vw等于1/100视口宽度。
{ 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 npm install postcss-pxtorem –save-dev
postcss-pxtorem 可以将CSS中的px单位转化为rem。
{
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
}
