关于vue-cli3:vuecli3配置postcssloader使用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 配置列表》

背景色应用十六进制色彩码没有转换，导致无奈进行渲染；