px 2 rem-loaderとlib-flexibleを利用してPC側の大画面プロジェクトの全自動開発をどのように実現するか

大画面プロジェクトをするとき、毎回remの値を自分で計算するのは面倒で、開発の進度にも影響します.だから、何気なく良いものを見つけました.webpack構成px 2 rem-loaderとlib-flexibleを利用してpx転化remを実現します.

まずパッケージ

を取り付ける.

npm install px2rem-loader -D
npm install lib-flexible -S

インストールが完了したら、構成を開始します.公式サイトの構成方法

を参照してください.

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUnit: 75,//      /10         1920        1920/10=192
          remPrecision: 8//   rem       
        }
      }]
    }]
  }
}
//         
{
        test: /\.less$/, //      css            sass  
        use: [ //   npm install sass-loader node-sass css-loader vue-style-loader postcss-loader style-loader -D                    
          process.env.NODE_ENV ? //MiniCssExtractPlugin.loader     css         js   
          'vue-style-loader' : MiniCssExtractPlugin.loader, //   vue