postcss-prefixer 作用

一个PostCSS插件，用于为 CSS 选择器添加前缀。

/* source css file */

#selector { /* content */ }

.selector { /* content */ }

.selector:hover { /* content */ }

.selector__element { /* content */ }

/* output css file prefixed with "prfx__" */

#prfx__selector { /* content */ }

.prfx__selector { /* content */ }

.prfx__selector:hover { /* content */ }

.prfx__selector__element { /* content */ }

安装依赖

yarn add -D postcss
yarn add -D postcss-prefixer

使用

// vue.config.js 在编译时触发
const fs = require('fs');
const postcss = require('postcss');
const prefixer = require('postcss-prefixer');

const input = fs.readFileSync('src/file.css',  'utf-8'); // 需要添加前缀的输入文件

postcss([
  prefixer({
    prefix: 'prefix-',
    ignore: [ /selector-/, '.ignore', '#ignore' ]
  })
]).process(input).then((result) => {
  fs.writeFileSync('./src/style.css', result.css); // 最终生成的文件
})

结果

/* file.css 输入文件 */
.selector-test2 {
  color: red;
}
.app {
  background-color: aquamarine;
}
.test1 {
  font-size: 20px;
}

/* result.css 输出文件 */
.selector-test2 {
  color: red;
}
.prefix-app {
  background-color: aquamarine;
}
.prefix-test1 {
  font-size: 20px;
}

参考

PostCSS：github.com/postcss/pos…

postcss-prefixer：github.com/marceloucke…