vue-cli3如何使用postcss-loader配置css使用BEM写法？

Question

如果使得下面写法生效

bem写法

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

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

使用postcss-salad配置后，需要可以渲染成功，但会报错：

postcss-custom-properties: variable '--bg-color' is undefined and used without a fallback

然后，再引入插件postcss-import与postcss-cssnext，但还是不行，而且会导致项目运行变得比较卡；

---

如下遇到的报错问题【与上面没关联】：

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: true is not a PostCSS plugin

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: child.moveAfter is not a function

Module build failed (from ./node_modules/postcss-loader/index.js):
TypeError: Cannot read property 'postcss' of undefined

---

Answer 1

目前使用BEM没什么问题，但有些细节上还是无法进行处理，如果解决后期再进行更新；

可以查看文章：《vue-cli3配置postcss-loader使用BEM》

文章下方还有没处理有问题，如果有知道怎么解决的，可在下方给出解决方法。[抱拳]