VUE 与 Webpack 使用postcss-px-to-viewport px转vw

VUE 的配置

安装

npm install postcss-px-to-viewport --save-dev

在 vue.config.js 文件的 module.exports 中加入配置

• PC 端

css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-px-to-viewport")({
						unitToConvert: 'px',		// (String) 需要转换的单位，默认为"px"
						viewportWidth: 1440,		// (Number) 设计稿的视口宽度
						viewportHeight: 900,			// (Number) 设计稿的视口高度
						unitPrecision: 5,			// (Number) 单位转换后保留的精度
						propList: ['*'],			//  (Array) 能转化为vw的属性列表
						viewportUnit: 'vw',		//  (String) 希望使用的视口单位
						fontViewportUnit: 'vw',	// (String) 字体使用的视口单位
						selectorBlackList: [],	// (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
						minPixelValue: 1,			// (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
						mediaQuery: false,		//  (Boolean) 媒体查询里的单位是否需要转换单位
						replace: true,			// (Boolean) 是否直接更换属性值，而不添加备用属性
						exclude: /(\/|\\)(node_modules)(\/|\\)/,			//  (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
						landscape: false,			// (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
                    })
                ]
            }
        }
    }

• 移动端，配置内容修改为下面

unitToConvert: 'px', // 需要转换的单位，默认为"px"
viewportWidth: 375, // 视窗的宽度，对应移动端设计稿的宽度，一般是375
viewportHeight:667,// 视窗的高度，对应的是我们设计稿的高度
unitPrecision: 3, // 单位转换后保留的精度
propList: [
  '*',
],// 能转化为vw的属性列表
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件

Webpack 的配置

安装

npm install postcss-px-to-viewport  postcss-loader --save

在 webpack.config.js 文件的 module 模块中添加配置

注意如果存在 sass-loader 一起使用，请 将 postcss-px-to-viewport 的配置放到 sass-loader 前面

// webpack.config.js
module.exports = {
    // css
    {
        test: /\.css$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
                loader: 'postcss-loader',
                options: {
                    plugins: [
                        require('postcss-px-to-viewport')({
                          unitToConvert: "px", // 需要转换的单位，默认为"px"
			              viewportWidth: 1920, // 视窗的宽度，对应pc设计稿的宽度，一般是1920
			              // viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度
			              unitPrecision: 3, // 单位转换后保留的精度
			              propList: [
			                // 能转化为vw的属性列表
			                "*",
			              ],
			              viewportUnit: "vw", // 希望使用的视口单位
			              fontViewportUnit: "vw", // 字体使用的视口单位
			              selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。cretae
			              minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
			              mediaQuery: false, // 媒体查询里的单位是否需要转换单位
			              replace: true, // 是否直接更换属性值，而不添加备用属性
			              exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
                        })
                    ]
                }
            }
        ]
    }
}

另外一种配置方式，建立配置文件 postcss.config.js ，配置内容

module.exports = {
  parser: 'postcss-scss',
  plugins: [
    require('postcss-px-to-viewport')({
      unitToConvert: 'px', //需要转换的单位，默认为"px"
      viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度
      unitPrecision: 1, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      propList: ['*'], // 能转化为vw的属性列表
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      fontViewportUnit: 'vw', //字体使用的视口单位
      selectorBlackList: ['.ignore-', '.hairlines'], //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换`px`
      replace: true, //是否直接更换属性值，而不添加备用属性
      exclude: [], //忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', //横屏时使用的单位
    })
  ]
}

在 webpack.config.js 文件在再引入配置

{ test: /\.scss$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            config: {
                                path: 'postcss.config.js'
                            }
                        }
                    },
                    { loader: 'sass-loader', options: { includePaths: [ paths.bootstrapSass, paths.fontAwesomeSass ] } },
                ]
            }