style-vw-loader vue3

你可以使用 style-vw-loader 来在 Vue 3 中使用 vw 单位。这个 loader 可以将你的样式文件中的 px 值转换为 vw 值，以实现响应式布局。要使用 style-vw-loader，你可以按照以下步骤进行操作：

1. 首先，安装 style-vw-loader 和 postcss-px-to-viewport 插件。可以使用以下命令进行安装：

   npm install style-vw-loader postcss-px-to-viewport --save-dev

2. 在你的 webpack 配置文件中添加 style-vw-loader。找到 Vue 的配置代码段，一般在 `module.rules` 数组中的 `css` 或 `scss` 配置中，添加以下配置：

   {
     test: /\.css$/,
     use: [
       'style-loader',
       'css-loader',
       {
         loader: 'postcss-loader',
         options: {
           postcssOptions: {
             plugins: [
               [
                 'postcss-px-to-viewport',
                 {
                   unitToConvert: 'px',
                   viewportWidth: 750, // 设计稿宽度
                   unitPrecision: 5,
                   viewportUnit: 'vw',
                   fontViewportUnit: 'vw',
                   selectorBlackList: [],
                   minPixelValue: 1,
                   mediaQuery: false,
                   replace: true,
                   exclude: [/node_modules/],
                 },
               ],
             ],
           },
         },
       },
       'style-vw-loader',
     ],
   }

注意，你需要根据你的设计稿宽度调整 `viewportWidth` 的值。

3. 确保你的样式文件中使用的是 px 单位。style-vw-loader 会自动将 px 转换为 vw。

   .example {
     font-size: 16px;
     width: 200px;
   }

在编译后的样式中，上述代码将会被转换为：

   .example {
     font-size: 2.13333vw;
     width: 26.66667vw;
   }

这样，你就可以在 Vue 3 中使用 style-vw-loader 来实现响应式的 vw 单位布局了。希望对你有帮助！如果你还有其他问题，请随时问我。