Using <style lang="postcss"> in Vue Component leads to error

[ChristianHuff-DEV]

I have the following Vue component:

<template>
  <button class="primary">
    Test
  </button>
</template>

<style>
.primary {
  @apply bg-blue-300;
}
</style>

The style is applied and all is good. But I would like to use <style lang="postcss"> to get syntax highlighting. But when adding lang="postcss" I get the following error:

ERROR in ./src/components/base/QButton.vue?vue&type=style&index=0&lang=postcss& (./node_modules/vue-loader/lib??vue-loader-options!./src/components/base/QButton.vue?vue&type=style&index=0&lang=postcss&) 8:0
Module parse failed: Unexpected token (8:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> .primary {
|   @apply bg-blue-300;
| }

Going by this Twitter post. This should be possible. Is there any additional setup or configuration required to get syntax highlighting when using the directives in a Vue component?

It is a new project created with vue-cli version 4.2.2.

I added a postcss.config.js in the src folder containing the following:

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")]
};

My tailwind.config.js is empty:

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

The following packages are installed:

{
  "name": "webclient-service",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "tailwindcss": "^1.2.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@storybook/addon-actions": "^5.3.13",
    "@storybook/addon-links": "^5.3.13",
    "@storybook/addon-storysource": "^5.3.13",
    "@storybook/addons": "^5.3.13",
    "@storybook/vue": "^5.3.13",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-unit-jest": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "1.0.0-beta.31",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "babel-preset-vue": "^2.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^6.1.2",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.11"
  }
}

[thalesagapito]

Can you share your webpack config? It sounds like you don't have the postcss loader properly configured.

[ChristianHuff-DEV]

@thalesagapito it is a new project created with @vue/cli version 4.2.2.

I didn't tinker with any of the default configurations.

[thalesagapito]

Well that's probably what's wrong. According to the Vue CLI docs:

Vue CLI uses PostCSS internally

So since you have used it to create your project it'll work out of the box, and that's why your css by default has postcss processing. But since you're trying to add lang="postcss", your webpack config needs instructions on how to process these lang="postcss" blocks.

What you need to do is update your vue.config.js like this:

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.postcss$/,
          use: [ 'style-loader', 'postcss-loader' ]
        }
      ]
    }
  }
}

And add the postcss-loader package to your devDependencies.

[ChristianHuff-DEV]

Thank you for your help!

I thought that since the Vue CLI docs already use PostCSS I don't have to do any additional setup.