网上找了很多文章，但也没看到几个是实用的，而且很多是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.jsvar 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配置列表》
背景色应用十六进制色彩码没有转换，导致无奈进行渲染；