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

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

Releases

No releases published

Packages

No packages published