postcss-px-to-viewport 不转换字体大小
时间: 2023-11-21 19:56:25 浏览: 56
可以通过配置postcss.config.js文件来实现不转换字体大小。在该文件中添加exclude选项,将字体大小所在的文件路径排除在转换范围之外即可。具体操作如下:
1.在项目根目录下创建postcss.config.js文件。
2.在该文件中添加如下代码:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿宽度
exclude: [/node_modules/, /font/] // 排除字体大小所在的文件路径
}
}
}
```
其中,exclude选项是一个正则表达式数组,用于匹配需要排除的文件路径。上述代码中,/node_modules/用于排除node_modules目录下的文件,/font/用于排除所有包含font的文件路径。
3.保存文件后,重新运行打包命令即可。
相关问题
postcss-px-to-viewport怎么实现全局调整字体大小
要在整个项目中使用postcss-px-to-viewport调整字体大小,可以在webpack配置中添加postcss.config.js文件,并在其中添加postcss-px-to-viewport插件的配置。
下面是一个示例的postcss.config.js文件,其中设置了viewportWidth为375,即设计稿宽度为375px,同时将所有的字体大小都转换为相应的vw值:
```
module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
'autoprefixer': {},
'postcss-px-to-viewport': {
viewportWidth: 375,
selectorBlackList: [],
minPixelValue: 1,
unitToConvert: 'px',
viewportUnit: 'vw',
fontViewportUnit: 'vw',
mediaQuery: false,
replace: true,
exclude: /(\/|\\)(node_modules)(\/|\\)/,
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}
}
}
```
通过以上配置,我们可以将所有的字体大小转换为vw单位,以适应不同屏幕尺寸的设备。同时,我们还可以通过selectorBlackList属性来排除一些不需要转换的选择器,例如以下样式将不会被转换:
```
.selector {
font-size: 12px; /* 不会被转换 */
}
```
postcss-px-to-viewport 可以实现全局字体大小设置吗
可以的,`postcss-px-to-viewport` 可以通过设置 `viewportWidth` 和 `viewportHeight` 来实现将 `px` 转换为 `vw` 或 `vh`,从而实现全局字体大小设置。
你可以在配置文件中添加以下代码:
```javascript
module.exports = {
plugins: [
require('postcss-px-to-viewport')({
viewportWidth: 750, // 视窗的宽度,对应设计稿的宽度
viewportHeight: 1334, // 视窗的高度,对应设计稿的高度
unitPrecision: 3, // 指定 `px` 转换为视窗单位值的小数位数
viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用 vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不需要转换的类名,可以自定义
minPixelValue: 1, // 小于或等于 `1px` 不转换为视窗单位
mediaQuery: false // 允许在媒体查询中转换 `px`
}),
// 其他插件
]
}
```
在代码中使用 `px` 作为单位来设置字体大小,`postcss-px-to-viewport` 会自动将其转换为相应的 `vw` 值。例如,如果设计稿中某个字体大小为 `32px`,那么在代码中可以这样设置:
```css
font-size: 32px;
```
`postcss-px-to-viewport` 会将其转换为:
```css
font-size: 4.26667vw;
```
这样就可以实现全局字体大小的设置。