https://github.com/flonny/pxtovw-loader
A plugin for webpack that generates 'vw' from pixel units.
https://github.com/flonny/pxtovw-loader
css px-to-vw px2vw pxtovw vw webpack webpack-loader webpack-px-to-vw
Last synced: about 2 months ago
JSON representation
A plugin for webpack that generates 'vw' from pixel units.
- Host: GitHub
- URL: https://github.com/flonny/pxtovw-loader
- Owner: flonny
- Created: 2020-06-20T06:08:35.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T05:24:22.000Z (over 3 years ago)
- Last Synced: 2025-10-24T04:36:00.067Z (8 months ago)
- Topics: css, px-to-vw, px2vw, pxtovw, vw, webpack, webpack-loader, webpack-px-to-vw
- Language: CSS
- Homepage:
- Size: 1.07 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pxtovw-loader
> this is a webpack loader of pxtovw
>
> [postcss-plugin](https://www.npmjs.com/package/pxtovw-postcss)
## Usage
### webpack pxtovw-loader
```bash
npm install pxtovw-loader -D
```
```javascript
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
```bash
npm i postcss-loader pxtovw-postcss -D
```
> webpack.config.js
```javascript
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
}
```
> postcss.config.js
```javascript
module.exports = {
plugins: {
"pxtovw-postcss" : {
unitToConvert:'px', //Custom conversion unit
viewportWidth: 1080, //Viewport width
unitPrecision: 5, //retain decimal places
minPixelValue: 2 // minimum conversion value
}
}
}
```