vue-cli3配置postcss-loader使用BEM

网上找了很多文章，但也没看到几个是实用的，而且很多是2017年左右的文章，用到的技术postcss-cssnext已经被弃用，目前使用postcss-preset-env替换，但这个插件不完善，或者是我没找到解决办法，存在一部分问题，但使用BEM写法是没什么问题的。

BEM写法示例：

<template>
    <div class="ga-home__container">
        ...
    </div>
</template>

<style> 
@component-namespace ga {
  @b home {
    @e container {
      width: 100%;
      height: 100%;
      color: #a2eeff;
    }
  }
} </style>

vue2.x配置BEM

使用到插件postcss-salad进行配置；
在目录.postcssrc.js，配置postcss-salad即可；

// 使用的版本号
// "postcss": "^5.2.17",
// "postcss-salad": "^1.0.8",

// .postcssrc.js

var salad = require('postcss-salad')
module.exports = {
  "plugins": [
    // to edit target browsers: use "browserlist" field in package.json
    salad({
      browser: ['ie > 9', 'last 2 version'],
      features: {
        'bem': {
          'shortcuts': {
            'component': 'b',
            'modifier': 'm',
            'descendent': 'e'
          },
          'separators': {
            'descendent': '__',
            'modifier': '--'
          }
        }
      }
    })
  ]
}

vue-cli3配置BEM写法

使用到的插件postcss-bem-fix、postcss-preset-env；
【注意】：postcss-bem比如旧版，目前舍不得postcss-bem-fix
可以查看以下文章：
《postss-bem version is too low》
《弃用cssnext》

// 使用的版本号
// "postcss-bem-fix": "^2.1.0",
// "postcss-preset-env": "^6.7.0"

const POSBEM = require('postcss-bem-fix')
const POSENV = require('postcss-preset-env')
module.exports = {
  plugins: [
    POSBEM({
      style: 'suit', // suit or bem, suit by default,
      separators: {
        'descendent': '__',
        'modifier': '--'
      },
      shortcuts: {
        'component': 'b',
        'modifier': 'm',
        'descendent': 'e'
      }
    }),
    POSENV({
      browsers: ['> 1%', 'last 2 versions'],
      stage: 4,
      preserve: false, // instruct all plugins to omit pre-polyfilled CSS
      features: {
        'custom-properties': true
      },
      "autoprefixer": {}
    })
  ]
}