postcss 文档不清晰

[transtone]

昨天花了好长时间在 <script> 中 import 进来的独立css文件不被 postcss 处理 的问题上。
经过多方测试和检验，发现这种情形 vue-loader 似乎是不处理的，issue 中的大多评论建议大家修改 webpack 配置，为 css 文件添加 postcss-loader ，单独配置处理。而 vue-cli 中的 webpack 模板，css配置是封装过的，对新手不友好。
进而发现自己对vue-loader 加载 postcss 处理 css 样式的流程没搞清楚。经摸索，大概是这样的：

## vue-loader 的 postcss 处理
<script> 中 import 进来的css文件不被 vue-loader 处理。
因此想要vue-loader处理独立的css文件，可以用 <style src="filename.css"> 的方式引入。 

vue-loader 默认的 postcss 配置文件路径为:
webpack内联选项(build/vue-loader.conf.js) > postcss.config.js > .postcssrc.js

弄明白之后再看 https://github.com/vuejs/vue-loader/blob/master/docs/zh-cn/features/postcss.md 文件，发现其实已经提到了怎么配置，但文档却默认用户知道vue-loader处理css的流程，也知道如何修改 vue-cli webpack 模板封装后的 build/utils.js 文件中 cssloader 的配置。

原文：
由vue-loader 处理的 CSS 输出，都是通过 PostCSS 进行作用域重写，你还可以为 PostCSS 添加自定义插件，例如 autoprefixer 或者 CSSNext。

困惑：

1. 由vue-loader处理的css输出，哪些 css输出是由 vue-loader 处理的？不被 vue-loader 处理的css输出有哪些，可以怎么处理，容易引起哪些问题？
2. 都是通过 PostCSS 进行作用域重写，是内置的 postcss，还是需要另行加载 postcss-loader？
3. 可以为 PostCSS 添加自定义插件，在哪个配置文件里添加？vue-loader 从 11.0 版本开始支持通过 postcss-loader 自动加载同一个配置文件 这句话不通，会引起歧义。同一个配置文件，谁和谁的同一个配置文件？vue-loader 通过 postcss-loader 加载，是内部调用的，还是需要增加额外的 postcss-loader ？是否可以改为：
   vue-loader 从 11.0 版本开始支持通过配置文件来配置，采用了和 postcss-loader 相同的方案，加载的是相同的配置文件：

建议：

1. 明确 vue-loader 处理哪些文件中的 css 样式。
2. 明确 vue-loader 调用 postcss 处理 css 样式时，默认的配置文件路径是什么。(配置文件及路径在文档中有，可我看了多遍还是忽略了，以为只跟独立的 postcss-loader 有关。)
3. 添加对易于出错的 import '*.css' 文件 情况的说明及配置方案。
4. 在webpack 中的 css loader 配置文档中，添加官方vue-cli webpack模板的配置方案。

[transtone]

#988

[Jinjiang]

这个问题我觉得可以从这样几个角度去看：

一、PostCSS 配置方式本身

1. vue-loader 默认引入并依赖了 postcss-loader，但静默不做任何特殊处理，你不会感觉到它的存在。
2. 如果你希望在你的工程中使用 postcss 来处理 css 文件，那么我们当然默认你知道 postcss 本身怎么配置和使用了，这部分内容如果有疑问的话可以直接查阅 postcss 的相关文档。
3. 在 postcss 的相关知识和 webpack config 中配置 css 的知识的基础上，vue-loader 需要开发者额外了解的信息是：
   1. 写在 postcss.config.js、.postcssrc、package.json 中的 postcss 配置信息将自动运用在 *.vue 文件的 <style> 中；
   2. 如果你希望针对 *.vue 文件中的 <style> 做特殊的配置，那么就把这些配置写在 vue-loader 配置的 postcss 字段里，即 inline options；
   3. 你不希望 1 中提到的 postcss 配置文件生效，我们还有一个 useConfigFile: false 配置项作为补充。

基本上这也是 vue-loader 关于 postcss 部分的文档的撰写顺序。

二、PostCSS 默认不解析 @import 的问题

1. 即便不配置 vue-loader 且不在 *.vue 文件里，你直接在 *.css 文件里写 @import，PostCSS 也是不会处理里面的样式的。这跟 vue-loader 本身无关，vue-loader 也没有做任何特殊处理。
2. 你可以手动配置 postcss-import 插件来达到这个目的。css 文件和 vue 文件同样生效。
3. 毕竟，话说回来，vue 是支持 <style src="..."> 的，如你所说。所以这个插件不用也罢。

三、build/vue-loader.conf.js

这个就是纯粹的 webpack-simple 模板的问题了，跟 vue-loader 没有任何耦合或直接的关联关系。

这引出另外一个话题：这个模板我觉得更多的是帮助开发者快速初始化一个基于 webpack 的工程吧，并不是“封装” webpack 而让你省去学习 webpack 的过程，换句话说，不等于用了这个模板就不需要掌握 webpack 的用法，所以 webpack 不熟的确实还是需要自己学起来的，这里面细节实在太多了，就算把你说的那几点描述清楚了，还是会有很多别的细节，需要在 webpack 那边查阅清楚的。

谢谢

[yyx990803]

新版的 vue-cli 帮裸 css 也默认配置上了 postcss-loader，全都统一用 config file 就行了。