Cant use PostCSS in theme components

[r0skar]

When I add styles to the default theme (Layout.vue) like so:

<style lang="postcss" scoped>
.test {
  color: #000000;
}
</style>

I get this error:

ERROR in ./node_modules/vuepress/lib/default-theme/Layout.vue?vue&type=style&index=2&id=25045c01&lang=postcss&scoped=true (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuepress/lib/default-theme/Layout.vue?vue&type=style&index=2&id=25045c01&lang=postcss&scoped=true)
Module parse failed: Unexpected token (172:0)
You may need an appropriate loader to handle this file type.
|
|
| .test {
|   color: #000000;
| }
 @ ./node_modules/vuepress/lib/default-theme/Layout.vue?vue&type=style&index=2&id=25045c01&lang=postcss&scoped=true 1:0-146 1:162-165 1:167-310 1:167-310
 @ ./node_modules/vuepress/lib/default-theme/Layout.vue
 @ ./node_modules/vuepress/lib/app/.temp/routes.js
 @ ./node_modules/vuepress/lib/app/app.js
 @ ./node_modules/vuepress/lib/app/clientEntry.js
 @ multi ./node_modules/vuepress/lib/app/clientEntry.js

While this works just fine:

<style src="./styles/theme.css" lang="postcss"></style>

Since Vuepress comes with postcss-loader installed by default, I thought the code above should work out of the box?

[ulivz]

You have some misunderstandings about postcss.

FYI: postcss is not a CSS preprocessor language like sass, less or stylus, as postcss said:

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS.

so, just remove your lang="postcss".

[r0skar]

The problem is that without the lang tag, syntax highlighting in VSCode doesnt work anymore, because Vetur depends on it (vuejs/vetur#506 (comment)). Also see vuejs/vue-cli#1259.

[ulivz]

Oh... the update two days ago!

Updated at 881199a