vue中的PostCss和常用postcss插件

酒阑人散
12,421 阅读3分钟

1. 什么是postcss

PostCSS是一个使CSS更容易，更灵活，更快速工作的工具。PostCSS 不是 一个“真正的”预处理器。PostCSS相当于一个CSS解析器，框架或API，它允许我们使用可以完成各种任务的插件。 它本身没有任何插件，为了更改原始 CSS，我们必须添加至少一个插件。

详见PostCSS 是个什么鬼东西？

2. vue中使用postcss

postcss-loader

Loader for webpack to process CSS with PostCSS

需要安装webpack loaderpostcss-loader才能使用postcss中的插件对css进行处理

webpack中配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      },
      {
        test: /\.s[a|c]ss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      }
    ]
  }
}

2.1 vue-cli

cli.vuejs.org/zh/guide/cs…

Vue CLI 内部使用了 PostCSS。

你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段

2.2 手动创建

都是在根目录下创建

package.json

可以在package.json里添加postcss字段

{
  "postcss": {
    "plugins": {
      // 各种插件
      "postcss-plugin": {}
    }
  }
}

module.exports = ({ env }) => ({
  ...options
  plugins: {
    'postcss-plugin': env === 'production' ? {} : false
  }
})

.postcssrc 或者在根目录下添加文件.postcssrc

It's recommended to use an extension (e.g .postcssrc.json or .postcssrc.yml) instead of .postcssrc

{
  "plugins": {
    // 各种插件
    "postcss-plugin": {}
  }
}

.postcssrc.js or postcss.config.js 如果需要逻辑处理，可以使用js文件

module.exports = {
  plugins: {
    'postcss-plugin': {}
  }
}

3. 常用css插件总结

3.1 autoprefixer

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

一句话，这是用来添加css前缀的插件

Browsers

Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries like > 5%

Autoprefixer使用Browserslist,所以在项目中你可以标明你需要的浏览器类型，例如>5%

The best way to provide browsers is a .browserslistrc file in your project root, or by adding a browserslist key to your package.json

最好的方法就是在项目的根目录下添加一个.browserslistrc文件，或者在package.json里增加一个key值browserslist

FAQ for Autoprefixer

webpack中使用

// webpack.base.conf.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

然后添加一个postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
// or 
module.exports = {
  plugins: [
    autoprefixer: {}
  ]
}

3.2 postcss-import

PostCSS plugin to transform @import rules by inlining content.

一款通过内联内容转换@import规则的PostCSS插件

This plugin should probably be used as the first plugin of your list

这个插件应该尽可能放在插件列表的第一位

// 个人理解就是实现把各个样式文件导进一个文件里的功能
* can consume `node_modules`, `web_modules` or local modules */
@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */
@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */

@import "foo.css"; /* relative to css/ according to `from` option above */

@import "bar.css" (min-width: 25em);

body {
  background: black;
}

notes

3.3 postcss-url

postcss-url

PostCSS plugin to rebase, inline or copy on url()

一个用来重置、内联或者复制url() 的postcss插件

3.4 postcss-nano

cssnano 是一个 PostCSS 插件，可以添加到你的构建流程中，用于确保最终生成的 用于生产环境的 CSS 样式表文件尽可能的小

cssnano中文文档

3.5 postcss-pxtorem

A plugin for PostCSS that generates rem units from pixel units.

在根目录下添加配置文件：(vue.config.js权重高)

  • vue.config.js
module.exports = {
    //...其他配置
    css: {
      loaderOptions: {
        postcss: {
          plugins: [
            'postcss-pxtorem': {
                rootValue: 16,
                minPixelValue: 2,
                propList: ['*'],
            }
          ]
        }
      }
    },
  }
  • postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 16,
            minPixelValue: 2,
            propList: ['*'],
        }
    }
}
  • 配置参数
{
    //rootValue 结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
    rootValue: 16,
    // 转换成rem后保留的小数点位数
    unitPrecision: 5,
    // 用来存放转换单位的属性的列表
    // [*] 表示全部
    // ['*position*'] 会匹配 background-position-y
    // Use ! to not match a property. Example: ['*', '!letter-spacing']
    // ['*', '!font*'] 不匹配font开头的属性
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    // 对匹配到的选择器进行筛选
    // 如果只有字符串，例如['body'] 会匹配 .body-class
    // [/^body$/] will match body but not .body，只能匹配到body标签
    selectorBlackList: [],
    // Replaces rules containing rems instead of adding fallbacks
    // 是否直接更换属性值，而不添加备用属性
    replace: true,
    // 媒体查询里的单位是否需要转换单位
    mediaQuery: false,
    // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
    minPixelValue: 0,
    // 转换时排除掉这些匹配到的文件
    exclude: /node_modules/i
}

3.6 postcss-px-to-viewport

将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件

  • 配置参数
{
  // 需要转换的单位，默认为"px"
  unitToConvert: 'px',
  // 设计稿的视口宽度
  viewportWidth: 320,
  // 单位转换后保留的精度
  unitPrecision: 5,
  // 能转化为vw的属性列表,匹配规则同上
  propList: ['*'],
  // 希望使用的视口单位
  viewportUnit: 'vw',
  // 字体使用的视口单位
  fontViewportUnit: 'vw',
  // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
  // 匹配规则同上
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false,
  replace: true,
  exclude: undefined,
  // 如果设置了include，那将只有匹配到的文件才会被转换
  include: undefined,
  // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
  landscape: false,
  // 横屏时使用的单位
  landscapeUnit: 'vw',
  // 横屏时使用的视口宽度
  landscapeWidth: 568
}
  • 使用
// 在postcss.config.js添加如下配置
module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
    }
  }
}

参考

  1. 聊聊PostCSS
  2. PostCSS 是个什么鬼东西？
  3. Vue中rem与postcss-pxtorem的应用
avatar
文章
阅读
粉丝