vue-cli3中引入postcss-px-to-viewport插件

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

因为插件的配置选项中有个exclude选项,它的值只支持正则表达式,但是正则表达式再json中是不允许的,所以不要配置在package.json中,要配置在vue.config.js里

module.exports = {
  devServer: {
    port: 8080,
    disableHostCheck: true,
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",
            viewportWidth: 750,
            unitPrecision: 3,
            propList: [
              "*"
            ],
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/,
          })
        ]
      }
    }
  }
}

配置项的介绍地址https://www.npmjs.com/package/postcss-px-to-viewport

你可能感兴趣的:(vue-cli3中引入postcss-px-to-viewport插件)