Skip to content

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

Notifications You must be signed in to change notification settings

flonny/pxtovw-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 10, 2021
b215996 · Feb 10, 2021

History

19 Commits
Feb 10, 2021
Jun 21, 2020
Jun 19, 2020
Feb 10, 2021
Jun 20, 2020
Jun 19, 2020
Jul 20, 2020
Feb 10, 2021
Jun 19, 2020
Jun 20, 2020

Repository files navigation

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
      }
    }
  }