介绍

如题

用法

给出以下参考用法，当然，高手可以自己随便玩。

Vue、react、angular框架使用步骤参考如下

第一步:

  1. npm install smart-rem -S

第二步:
在入口文件

  1. import smartRem from 'smart-rem'
  2. smartRem(Arguments)

注释: Arguments参数是设计稿的整个尺寸宽度，如果设计稿的尺寸宽度是750px，那么参数就是750（不带px），如下：

  1. smartRem(750)

注意vue2.x已经内置了对postcss的支持，所以，如果在根目录有.postcssrc.js文件，直接在此文件添加一行”postcss-auto-rem”:{}，然后npm install -D postcss-auto-rem 即可，下面第三步和第四步都不用看了。如果其它框架有变动，亦可酌情处理哦。
第三步:
安装依赖postcss postcss-auto-rem

  1. npm install --save-dev postcss postcss-auto-rem

第四步:
修改css相关rules配置
如果是Webpack,在webpack.config.js中使用postcss-loader:

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.css$/,
  6. exclude: /node_modules/,
  7. use: [
  8. {
  9. loader: 'style-loader',
  10. },
  11. {
  12. loader: 'css-loader',
  13. options: {
  14. importLoaders: 1,
  15. }
  16. },
  17. {
  18. loader: 'postcss-loader'
  19. }
  20. ]
  21. }
  22. ]
  23. }
  24. }

如果是CSS-in-JS,在jsx中使用postcss最好的方式是使用astroturf，添加到你的webpack.config.js中。

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.css$/,
  6. use: ['style-loader', 'postcss-loader'],
  7. },
  8. {
  9. test: /\.jsx?$/,
  10. use: ['babel-loader', 'astroturf/loader'],
  11. }
  12. ]
  13. }
  14. }

第五步：
检查你的项目是否存在postcss配置文件，一般位于根目录。
如果没有postcss的相关配置文件，则可以手动创建一个postcss.config.js，在plugins中，添加require(postcss-auto-rem)

  1. module.exports = {
  2. plugins: [
  3. + require('postcss-auto-rem'),
  4. require('autoprefixer')
  5. ]
  6. }

如果你使用parcel打包，而非webpack，那么parcel内置了postcss，你只需在根目录创建postcss.config.js，添加如代码

Nuxt框架，使用可参考如下

可在nuxt.config.js中的head部分做添加

  1. head: {
  2.     // ** 开始添加
  3.     script: [
  4.       {
  5.         innerHTML: require('smart-rem') + 'smartRem(Arguments)',
  6.         type: 'text/javascript',
  7.         charset: 'utf-8'
  8.       }
  9.     ],
  10.     __dangerouslyDisableSanitizers: ['script']
  11.     // ** 结束添加
  12.   },

其它步骤参考上面第一步到第四步。

Next 框架使用可参考如下

根目录下创建文件pages/_document.js，在render中添加script脚本

  1. // _document is only rendered on the server side and not on the client side
  2. // Event handlers like onClick can't be added to this file
  3. // ./pages/_document.js
  4. import Document, { Head, Main, NextScript } from 'next/document'
  5. export default class MyDocument extends Document {
  6.   static async getInitialProps(ctx) {
  7.     const initialProps = await Document.getInitialProps(ctx)
  8.     return { ...initialProps }
  9.   }
  10.   render() {
  11.     return (
  12.       <html>
  13.         <Head>
  14.           <style>{`body { margin: 0 } /* custom! */`}</style>
  15.           // **开始添加
  16.           <script dangerouslySetInnerHTML={{__html: require('smart-rem') + 'smartRem(Arguments)'}}></script>
  17.           // ** 结束添加
  18.         </Head>
  19.         <body className="custom_class">
  20.           <Main />
  21.           <NextScript />
  22.         </body>
  23.       </html>
  24.     )
  25.   }
  26. }

其它步骤参考最上面第一步到第四步。

Node Api用法参考如下

  1. var fs = require('fs');
  2. var postcss = require('postcss');
  3. var postcssAutoRem = require('postcss-auto-rem');
  4. var css = fs.readFileSync('main.css', 'utf8');
  5. var processedCss = postcss(postcssAutoRem()).process(css).css;
  6. fs.writeFile('auto-rem.css', processedCss, function (err) {
  7.   if (err) {
  8.     throw err;
  9.   }
  10.   console.log('file written.');
  11. });

gulp用法参考如下

  1. var gulp = require('gulp');
  2. var postcss = require('gulp-postcss');
  3. var autoprefixer = require('autoprefixer');
  4. var postcssAutoRem = require('postcss-auto-rem');
  5. gulp.task('css', function () { 
  6.     var processors = [
  7.         autoprefixer({
  8.             browsers: 'last 1 version'
  9.         }),
  10.         postcssAutoRem()
  11.     ];
  12.     return gulp.src(['build/css/**/*.css'])
  13.         .pipe(postcss(processors))
  14.         .pipe(gulp.dest('build/css'));
  15. });

参考文档