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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容