Closed luoriwusheng-xia closed 1 week ago
目前
nuxt@3.11.2
+ 这个插件最新版本,好像不太能支持,行内样式的转换nuxt.config.ts 配置文件
import postcsspxtoviewport from 'postcss-px-to-viewport-8-plugin' // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ devtools: { enabled: true }, postcss: { plugins: { 'postcss-px-to-viewport-8-plugin': postcsspxtoviewport({ unitToConvert: 'px', // 要转化的单位 viewportWidth: 750, // UI设计稿的宽度 unitPrecision: 10, // 转换后的精度,即小数点位数 propList: ['*'], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换 viewportUnit: 'vw', // 指定需要转换成的视窗单位,默认vw fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位,默认vw selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名, minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换 mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false replace: true, // 是否转换后直接更换属性值 include: [/\/src\/views\//], // 如果设置了include,那将只有匹配到的文件才会被转换 exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配 landscape: false // 是否处理横屏情况 }) } }, devServer: { host: '0.0.0.0' } })
package.json
{ "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "dependencies": { "nuxt": "^3.11.2", "vant": "^4.8.11", "vue": "^3.4.21", "vue-router": "^4.3.0" }, "devDependencies": { "postcss-px-to-viewport-8-plugin": "^1.2.5", "sass": "^1.75.0" } }
目前就初始化了一个模版,没有引入别的内容
<template> <div> 首页 <div class="test-box"></div> <div style="width: 200px; height: 200px; background-color: blue;">行内样式</div> </div> </template> <script setup> </script> <style lang="scss" scoped> .test-box { width: 200px; height: 200px; background-color: pink; } </style>
不支持行内样式
目前
nuxt@3.11.2
+ 这个插件最新版本,好像不太能支持,行内样式的转换nuxt.config.ts 配置文件
package.json
目前就初始化了一个模版,没有引入别的内容