README
Remember that if you have any questions during use, please contact email shuaiqiyupu@163.com. I'd be happy to help you.I suggest you keep looking until the end
What can this package do?
e.g.
Your css code
.foo {
/* Input example */
margin: 100px;
padding: 100px;
width: 50px;
font-size: 50px;
}
After using postcss-auto-rem,What it looks like in the browser
.foo {
/* Output example */
margin: 1rem;
padding: 1rem;
width: 0.5rem;
font-size: 0.5rem;
}
It is more efficient than other plug-ins, as shown in the picture below.
In this case, it's twice as fast
Support all popular frameworks、webpack、 gulp and nodejs api.
Usage
Step one:
npm install postcss-auto-rem -D
Step two:
Add the plugin to plugins list:
module.exports = {
plugins: [
// The default value of size is 100
+ require('postcss-auto-rem')({size: 100}),
require('autoprefixer')
]
}
Note:
If the parameter size is 100, the conversion result is as follows
100px => 100 / 100 => 1rem
If the parameter size is 16, the conversion result is as follows
100px => 100 / 50 => 2rem
Then, you'll see 2rem in your browser.
The default value of size is 100
e.g.
1.Vue Framework
npm install postcss-auto-rem -D
In file .postcssrc.js or postcss.config.js. If it doesn't exist, create one under the root directory of the project.
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"autoprefixer": {},
+ "postcss-auto-rem": {size: 100},
}
}
2.React Framework
npm install postcss-auto-rem -D
In file config/webpack.config.js. If it doesn't exist, create one with npm run eject
.
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
+ require('postcss-auto-rem')({size: 100}),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
postcssNormalize(),
],
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
3.Node Api
var fs = require('fs');
var postcss = require('postcss');
var postcssAutoRem = require('postcss-auto-rem');
var css = fs.readFileSync('main.css', 'utf8');
+ var options = {size: 100};
+ var processedCss = postcss(postcssAutoRem(options)).process(css).css;
fs.writeFile('auto-rem.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('file written.');
});
4.gulp
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var postcssAutoRem = require('postcss-auto-rem');
gulp.task('css', function () {
var processors = [
autoprefixer({
browsers: 'last 1 version'
}),
+ postcssAutoRem({size: 100})
];
return gulp.src(['build/css/**/*.css'])
.pipe(postcss(processors))
.pipe(gulp.dest('build/css'));
});
5.If your project framework is designed by yourself with webpack
(1) Add postcss-loader to webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
+ {
+ loader: 'postcss-loader'
+ }
]
}
]
}
}
if css-in-js, add astroturf
to webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'postcss-loader'],
},
{
test: /\.jsx?$/,
use: ['babel-loader', 'astroturf/loader'],
}
]
}
}
(2)Create file postcss.config.js
module.exports = {
plugins: [
+ require('postcss-auto-rem')({size: 100}),
require('autoprefixer')
]
}
Other instructions:
if you don't set the pixel value of the root element, you can choose smart-smart to set it.
npm install smart-rem -S
In the entry file(e.g. src/index.js or src/main.js)
import smartRem from 'smart-rem'
smartRem(Arguments)
Notes: Arguments is the width of design draft. If design draft's width is 750px, the argument of smartRem is 750 without 'px' as follows:
smartRem(750)
smart-rem will set the coefficient of root element to 100. So, parameter size of posts-auto-rem should be 100.