vue2 postcss-px-to-viewport scss

你好！针对在Vue 2中使用postcss-px-to-viewport和scss的问题，你可以按照以下步骤进行设置：

1. 首先，安装必要的依赖：

   npm install postcss-px-to-viewport postcss-import node-sass sass-loader --save-dev

2. 在项目根目录下创建postcss.config.js文件，并添加以下内容：

   module.exports = {
     plugins: {
       'postcss-import': {},
       'postcss-px-to-viewport': {
         viewportWidth: 750,  // 视窗的宽度，对应设计稿的宽度
         unitPrecision: 5,    // 指定`px`转换为视窗单位值的小数位数
         viewportUnit: 'vw',  // 指定需要转换成的视窗单位，建议使用vw
         selectorBlackList: ['.ignore'],  // 指定不需要转换的类名，可以自定义
         minPixelValue: 1,    // 小于或等于`1px`不转换为视窗单位
         mediaQuery: false,   // 允许在媒体查询中转换`px`
       },
     },
   };

3. 在Vue项目的webpack配置文件（一般是vue.config.js）中，添加sass-loader的配置：

   module.exports = {
     css: {
       loaderOptions: {
         sass: {
           additionalData: `@import "@/assets/scss/variables.scss";`,
         },
       },
     },
   };

4. 在你的Vue组件中，可以开始使用scss和px-to-viewport了。例如：

   <template>
     <div class="my-component">Hello World</div>
   </template>

   <style lang="scss" scoped>
   .my-component {
     width: 375px;  /* 在scss中使用px作为单位 */
     height: 200px;

     @media screen and (max-width: 768px) {
       font-size: 16px;
     }
   }
   </style>

这样，你就成功配置了postcss-px-to-viewport和scss，并且在Vue项目中使用了它们。使用postcss-px-to-viewport插件后，你在scss中使用的px单位将会自动转换为vw单位，以适应不同设备的屏幕尺寸。如有需要，请根据你的具体项目需求进行调整。希望对你有所帮助！如果你还有其他问题，请随时提问。