PostCSS

系统内置了多种postcss插件，提供css-modules功能（为每个样式名打上唯一标识），用于解决命名冲突和嵌套过深的问题。

css-modules作用于以.module.css结尾的文件，示例如下：

.test {
  background-color: white;

  &-red {
    background-color: red;
  }
}

import $style from './style.module.css'

console.log($style)
// {
//   test: 'xxx_test_xxx',
//   testRed: 'xxx_test-red_xxx'
// }

其中，键为我们定义的样式名，它的值为实际编译后的样式名，通过这样的方法，能够保证我们的样式名是唯一的，且处于顶层，无需嵌套。

对于Vue项目，我们可以这样来使用css-modules：

<style module>
.test {
  background-color: white;

  &-red {
    background-color: red;
  }
}
</style>

系统内置PostCSS插件一览：

补充说明：

results matching ""