1. 程式人生 > >vue-cli3.0 使用 postcss-pxtorem px轉rem

vue-cli3.0 使用 postcss-pxtorem px轉rem

pos otv source .config npm root stc class cto

1. 安裝依賴包 npm install postcss-pxtorem --save-dev

2. 在vue-cli3.0中。去掉了build和config文件夾。所有的配置都放到了vue.config.js中。

module.exports = {
  productionSourceMap: false, // 生產環境是否生成 SourceMap
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require(‘postcss-pxtorem‘)({
            rootValue: 
16, // 換算的基數 selectorBlackList: [], // 忽略轉換正則匹配項 propList: [‘*‘], }), ] } } }, }

可能遇到的坑:

插件會轉化所有的樣式的px。比如引入了三方UI,也會被轉化。可以使用selectorBlackList字段來過濾。
如果個別地方不想轉化px。可以簡單的使用大寫的 PX 或 Px 。

vue-cli3.0 使用 postcss-pxtorem px轉rem