yarn add postcss-px-to-viewport -D 报错
时间: 2023-10-29 16:05:32 浏览: 39
这个问题可能是由于您的环境没有安装 postcss-loader 导致的。您可以尝试先安装 postcss-loader,再安装 postcss-px-to-viewport。可以使用以下命令进行安装:
```
yarn add postcss-loader -D
yarn add postcss-px-to-viewport -D
```
如果还是报错,可以尝试升级您的 yarn 版本或者清除缓存再重新安装。
相关问题
umi postcss-px-to-viewport
为了在umi中使用postcss-px-to-viewport插件进行移动端布局,你需要按照以下步骤进行操作:
1. 首先,在.umirc.ts文件中引入postcss-px-to-viewport插件。你可以使用命令`npm i postcss-px-to-viewport`或`yarn add postcss-px-to-viewport`来安装插件的依赖。
2. 然后,通过import语句将postcss-px-to-viewport插件引入到你的代码中,例如:`import px2vw from "postcss-px-to-viewport"`。
3. 接下来,在.umirc.ts文件中进行配置。你可以在插件配置部分添加以下代码来配置postcss-px-to-viewport插件:
```javascript
export default {
// ...
extraPostCSSPlugins: [
px2vw({
// 插件配置选项
})
],
// ...
}
```
4. 在配置选项中,你可以根据需要设置不同的参数来适应你的项目。例如,你可以设置viewportWidth、unitPrecision、viewportUnit和selectorBlackList等选项,以便根据自己的需求进行移动端布局。
总结起来,你需要先下载并引入postcss-px-to-viewport插件,然后在.umirc.ts文件中进行配置,最后根据需要设置插件的参数。这样,你就可以在umi中使用postcss-px-to-viewport插件进行移动端布局了。 <span class="em">1</span><span class="em">2</span><span class="em">3</span>
hbuild使用postcss-px-to-viewport
hbuild使用postcss-viewport的步骤如下:
1. 首先,确保你已经在项目中安装了postcss-px-to-viewport插件。你可以使用npm或yarn来安装该插件,具体命令如下:
```shell
npm install postcss-px-to-viewport --save-dev
```
或
```shell
yarn add -D postcss-px-to-viewport
```
2. 在项目的根目录下找到postcss.config.js文件(如果没有则新建一个),并在该文件中配置postcss-px-to-viewport插件的参数。具体配置如下:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750, // 设计稿的宽度
viewportHeight: 1334, // 设计稿的高度
unitPrecision: 3, // 转换后的小数位数
viewportUnit: 'vw', // 转换的单位
selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的CSS选择器
minPixelValue: 1, // 最小的转换数值
mediaQuery: false // 是否转换媒体查询中的px
}
}
}
```
3. 配置完成后,hbuild会自动将项目中的px单位转换为viewport单位。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)