今天跟大家聊了一下 vue 中的CSS 處理:
postcss.config.js首先我們要了解一下什麼是
postcsspostcss:它是一個利用JS插件來對CSS進行轉換的工具,這些插件非常強大,強大到無所不能。- 擁有極高的處理性能(3倍以上的處理速度)
- 你既可以寫正常的CSS,也可以結合LESS或者SASS一起編寫
- 對Source Map支持更好
- 他的插件真的太多太強大太便利了
postcss 的一些不錯的插件- autoprefixer是PostCSS最著名的一款插件,就不過多介紹了,相信同學們都使用過。
- postcss-cssnext (內置autoprefixer) 允許你使用未來的css語法,如css4(可以理解為css中的Babel)
- postcss-sprites 自動制作雪碧圖,不用手動拼接啦,哈哈哈
- cssnano 壓縮css代碼(如果你是用webpack的話,css-loader集成了cssnano,你不需要再次引入)
- postcss-hash-classname 把轉換後的css文件名附上哈希值
- pixrem 將rem轉換為px
- postcss-px-to-viewport 將px轉換為vh和vw(推薦作為移動端的計量單位,而不是rem)
- postcss-pxtorem 將px轉換為rem
postcss 的用法px轉rem
module.exports = () => ({
plugins: [
require('autoprefixer')(),
// require('postcss-px2rem')({ remUnit: 75 })
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['*']
})
]
});
這裏用到了
postcss-pxtorem 將px轉換為rem 的插件
px轉vwmodule.exports = {
plugins: {
autoprefixer: {},
'postcss-px-to-viewport': {
viewportWidth: 375, // 視窗的寬度,對應的是我們設計稿的寬度,一般是750
// viewportHeight: 1334, // 視窗的高度,根據750設備的寬度來指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`轉換為視窗單位值的小數位數(很多時候無法整除)
viewportUnit: 'vw', // 指定需要轉換成的視窗單位,建議使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換為視窗單位的類,可以自定義,可以無限添加,建議定義一至兩個通用的類名
minPixelValue: 1, // 小於或等於`1px`不轉換為視窗單位,你也可以設置為你想要的值
mediaQuery: false // 允許在媒體查詢中轉換`px`
},
'postcss-viewport-units': {
// 排除會產生警告的部份
filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
},
cssnano: {
preset: 'advanced',
autoprefixer: false, // 和autoprefixer同樣具有autoprefixer,保留一個
'postcss-zindex': false
}
}
}
這裏用到了
postcss-px-to-viewport,將px單位自動轉換成viewport單位。postcss-px-to-viewport 文檔
好了就先到這裏了!最近項目太忙一個接一個,我會抽時間給大家分享一些乾貨的!
喜歡博主的可以點贊關注一下喜歡博主的可以點贊關注一下長得美的,長得帥的都關注了現在就差你了還不長按關注一下