vuecli3のpostcss-pxtoremプラグインの構成に関連する問題

postcss-pxtoremは、pxをrem形式に変換する方法です。これは、基本的にhtmlタグのfontsize値に基づいており、要素のさまざまな測定単位を動的に変更します

1. インストールする

npm install postcss-pxtorem --save-dev

2. インポート

//main.js
import 'postcss-pxtorem'//导入rem转换工具

3. 構成

インストール後にpostcss.config.js構成ファイルがvueプロジェクトのルートディレクトリに自動的に生成されることをインターネットで確認しましたが、postcss-pxtoremをインストールしてインポートした後、ファイルが表示されませんでした。ディレクトリ、関連プラグインを設定するためにvue.config.jsのみをサポート

postcss.config.jsが表示されない場合は、vue.config.jsでpostcss-pxtoremを設定できます。

プロジェクトのルートディレクトリに新しいvue.config.jsを作成します

//vue.config.js
module.exports = {
 plugins:{
    'postcss-pxtorem': { //在这里配置postcss-pxtorem的相关配置
      rootValue: 75,// html根元素的fz大小
      propList: ['*']//作用于哪些标签
    }
  }
}

ルートディレクトリに構成ファイルpostcss.config.jsがある場合：

//postcss.config.js
module.exports = {
  plugins:{
    autoprefixer:{
    },
    'postcss-pxtorem' :{
      rootValue: 75,//页面html根节点设置的fz的大小
      propList:['*'] //匹配到的标签
    }
  }
}

上記の方法を使用して、postcss-pxtoremの構成を完了します。

構成が有効であることを確認するデモ：

//myhome.vue
<template>
  <div class="home">
myhome
  </div>
</template>
<style lang="less" scoped>
  .home{
    width: 150px;
    height: 150px;//如果浏览器上显示单位是rem，则说明配置成功
    border-bottom: 1PX solid red; //如果px单位是大写，说明按原样输出
  }
</style>

構成が有効になると、.home divの幅と高さがrem単位に変換されますが、borer-bottom属性は変換されません。

このようにして、vuecli3でのpostcss-pxtoremプラグインの設定が完了します。

上。