yarn
yarn test // then you can see the processed result in test.result.cssa webpack loader to process css file which can convert
pxuint toremandmedia querycode
The raw stylesheet:
.selector {
width: 150px;
height: 64px; /*px*/
margin-top: 10px; /*no*/
font-size: 28px;
border: 1px solid #ddd;
border-right-width: 2px;
}Rem and Media Query version:
.selector {
width: 2rem;
margin-top: 10px;
border: 1px solid #ddd;
border-right-width: 2px;
}
@media (max-width: 1280px) {
.selector {
height: 32px;
font-size: 14px;
}
}
@media (min-width: 1281px) and (max-width: 1920px) {
.selector {
height: 64px;
font-size: 28px;
}
}
@media (min-width: 1921px) {
.selector {
height: 96px;
font-size: 42px;
}
}npm install auto-px2rem-loader
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'auto-px2rem-loader',
// options here
options: {
remUnit: 100
}
}
]
}
]
}
};There are all default configurations in the loader, you can also customize them in the webpack config file
{
loader: 'auto-px2rem-loader',
options: {
remUnit: 75, // rem unit value (default: 75)
remPrecision: 6, // rem value precision (default: 6)
forcePxComment: 'px', // force px comment (default: `px`)
forceRemComment: 'rem', // force rem comment (default: `rem`)
keepComment: 'no', // no conversion comment (default: `no`)
// comment has higher priority than autodeal css properties
// these css properties will be converted into media query, fauzzy matching
autoDealPx: ['font-size'],
// these css properties will not be converted, fauzzy matching
autoDealNo: [
'border',
'shadow',
'min',
'max',
],
appendAutoDealPx: [], // this will merge to autoDealPx, fauzzy matching
appendAutoDealNo: [], // this will merge to autoDealNo, fauzzy matching
mediaQuery: [// media query rules
{
mediaType: '(max-width: 1280px)', // media query width
ratio: 0.5, // conversion ratio
},
{
mediaType: '(min-width: 1281px) and (max-width: 1920px)',
ratio: 1,
},
{
mediaType: '(min-width: 1921px)',
ratio: 1.5,
}
]
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent