vue-cli4中配置移动端自适应postcss-pxtorem

2020-04-19 22:09:28 阅读：788 来源： 互联网

标签：cli4 vue 端自 flexible import postcss pxtorem amfe

vue-cli创建完项目之后安装amfe-flexible和postcss-pxtorem

npm i amfe-flexible -S
npm i postcss-pxtorem -D

amfe-flexible来根据屏幕动态改变根元素font-size，postcss-pxtorem把代码中px转为rem;在项目根目录建vue.config.js

vue.config.js内容：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"] 
          }),
          require("postcss-pxtorem")({
            rootValue: 75, // 换算的基数
            // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
            //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
            selectorBlackList: ["ig"],
            propList: ["*"],
            exclude: /node_modules/
          })
        ]
      }
    }
  }
};

然后在main.js里引入amfe-flexible

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'amfe-flexible'


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

注：如果你创建时候选择了prettier格式化代码而且编译器也装了插件，你的css里不想被转化的"PX"编译器会自动帮你转化为"px"，此时只要在不想转化前一行加上

/* prettier-ignore */即可示例如下：

转化后：

标签：cli4,vue,端自,flexible,import,postcss,pxtorem,amfe
来源： https://www.cnblogs.com/yifeng555/p/12734032.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue-cli4中配置移动端自适应postcss-pxtorem