flonny/pxtovw-loader

A plugin for webpack that generates 'vw' from pixel units.

pxtovw-loader

this is a webpack loader of pxtovw

postcss-plugin

Usage

webpack pxtovw-loader

npm install pxtovw-loader -D

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'pxtovw-loader',
        options: {
          unitToConvert:'px', //Custom conversion unit
          viewportWidth: 1080, //Viewport width
          unitPrecision: 5, //retain decimal places
          minPixelValue: 2 // minimum conversion value
        }
      }]
    }]
  }
}

postcss pxtovw-postcss

npm i postcss-loader pxtovw-postcss -D

webpack.config.js

  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
          ]
        }
      ]
    }
  }

postcss.config.js

  module.exports = {
    plugins: {
      "pxtovw-postcss" : {
          unitToConvert:'px', //Custom conversion unit
          viewportWidth: 1080, //Viewport width
          unitPrecision: 5, //retain decimal places
          minPixelValue: 2 // minimum conversion value
      }
    }
  }

pxtovw-loader's Issues

该怎么集成到webpack-chain?

设置后，不生效。。
chainWebpack(config) { config.module .rule('pxtovw') .test(/.css$/) .use('pxtovw-loader') .loader(path.resolve('./loaders/inline-style-px-to-vw.js')) .options({ unitToConvert: 'px', // 自定义转换单位 viewportWidth: 375, // 视口宽度 unitPrecision: 5, // 保留小数位 minPixelValue: 2 // 最小转换数值 }) .end().exclude.add([path.resolve('../src/pages/.umi'), path.resolve('node_modules')]) }