移动端布局方案 postcss-pxtorem-postcss-preset-env

最新推荐文章于 2024-05-17 17:40:41 发布

liu__software

最新推荐文章于 2024-05-17 17:40:41 发布

阅读量258

点赞数

分类专栏： web前端文章标签： postcss 前端 javascript

web前端专栏收录该内容

105 篇文章 6 订阅

订阅专栏

移动端布局方案 postcss-pxtorem-postcss-preset-env

目标

通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作
而不需要再手动计算

实现方式

postcss-pxtorem：将px转换为px
amfe-flexible：为html、body添加font-size，窗口调整时候重新设置font-size

安装与使用

安装

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

注：如果报错，则需要指定postcss-pxtorem版本，如： npm install postcss-pxtorem@5.1.1 --save-dev

使用

在main.js入口文件引入

import 'amfe-flexible'

创建postcss.config.js配置文件

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 75, // 设计稿宽度的1/10
            "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
}

处理报错问题

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

缺少相应的插件（安装包） postcss 和 postcss-loader，安装这两个插件即可；

postcss-loader@5.2.0 requires a peer of webpack@^5.0.0 but none is installed. You must install peer dependencies yourself.

降低 postcss-pxtorem 的版本，删除已有的postcss-pxtorem版本，安装指定版本
npm i postcss-pxtorem@5.1.1 --save-dev

如果需要less-loader，碰到 Syntax Error: TypeError: this.getOptions is not a function

less-loader 、postcss-loader的版本要相互匹配，版本相差不能太大，
建议安装的版本分别为less-loader 7.0.1, postcss-loader 4.0.4 。

可正常运行版本参考

PostCSS

什么是 PostCSS

PostCSS是一个通过JavaScript来转换样式的工具
这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置

命令行使用 postcss

安装： npm install postcss postcss-cli -D

举例一：css前缀

安装autoprefixer： npm install autoprefixer -D

直接使用使用 postcss 工具，并且制定使用 autoprefixer： npx postcss --use autoprefixer -o end.css ./src/css/style.css

转化之后的css样式如下：

postcss-loader

安装： npm install postcss-loader -D

postcss-loader 会去找 postcss

     {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [require("autoprefixer")],
              }
            }
          }
        ]
      }

autoprefixer 会添加符合 browserslistrc 规则的浏览器前缀。

单独的postcss配置文件

将 postcss 配置信息放到一个单独的文件中进行管理。

在根目录下创建 postcss.config.js

// webpack.config.js
const path = require('path');
 
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build")
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: [
          "style-loader", 
          "css-loader",
          "postcss-loader"
        ]
      }
    ]
  }
}
 
// postcss 配置单独写在 postcss.config.js
module.exports = {
  plugins: [
    require("autoprefixer")
  ]
}

postcss-preset-env

事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixer，可以使用另外一个插件：postcss-preset-env。