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": {}
    })
  ]
}

配置vue-cli3使用BEM写法遇到的问题

安装postcss-bem-fix后，发现var没法沉浸:root里面的值；

解决方法：须要使用postcss-preset-env配置

---

css渲染时，值从新渲染问题；

解决方法：postcss-preset-env只要把配置preserve:false便可；

---

如下问题是还没找到解决方法的

BEM写法里面嵌套css时，发现没法渲染
查看了 postcss-preset-env全部规则 featuress配置，但仍是没法处理；

《【postcss-preset-env】features配置列表》

---

背景色使用十六进制颜色码没有转换，致使没法进行渲染；