借鉴了大牛的博客 去看看
BEM中涉及css命名规范的内容
PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css。
npm install --save-dev style-loader css-loader postcss-loader stylus-loader
在项目中的根目录下,建个postcss.config.js文件,里面导出一个空模块
autoprefixer 自动添加前缀
cssnano 压缩css代码
postcss-cssnext css的下一代,使用css4的新语法包含了autoprefixer插件
postcss-pxtorem插件将px转换成rem
问题一:比如像border这种我不愿意替换成rem的我该怎么解决?
我还是想使用px来表达的话,那么我们可以把1px写成 1Px 或 1PX来解决
问题二:postcss-pxtorem中有哪些属性?
require('postcss-pxtorem')({
//假设设计稿750宽;rootValue为75,说是对根元素大小进行设置.
rootValue: 75,
//unitPrecision为5,是转换成rem后保留的小数点位数.
unitPrecision: 5,
//propList是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']意思是排除带有border的属性.
propList: ['*'],
//selectorBlackList则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换这里也支持正则写法。
selectorBlackList: [],
replace: true,
mediaQuery: false,
//minPixelValue的选项,我设置了12,意思是所有小于12px的样式都不被转换
minPixelValue: 12
})
问题三:怎么通过wenpack配置二倍图三倍图?
复制代码