Vue single file component and SugarSS from PostCSS with Webpack

Question

I'm trying to use SugarSS in Vue single file components and Webpack 2, but no luck so far. Here's my component file:

<template lang="pug">
  h1 hello!
</template>

<script>
  export default {
    data: () => {
      return {message: "hello!"}
    }
  }
</script>

<style scoped lang="postcss">
  h1
    color: green
    display: flex
</style>

Here's my webpack.config.js:

module.exports = {
  entry: "./browser.js",
  output: {
    filename: "static/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["latest"]
        }
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          postcss: {
            options: {
              parser: require("sugarss")
            }
          }
        }
      }
    ]
  }
}

I also have postcss.config.js just in case, in the same directory:

module.exports = {
  plugins: [
    require("sugarss")
  ]
}

I tried using <style scoped lang="sugarss"> but no luck too. Here's the error code when running webpack:

TypeError: Invalid PostCSS Plugin found. Please check your PostCSS Config
    at /home/piotr/herd/js/node_modules/postcss-load-plugins/lib/plugins.js:46:17
    at Array.forEach (native)
    at plugins (/home/piotr/herd/js/node_modules/postcss-load-plugins/lib/plugins.js:23:15)
    at /home/piotr/herd/js/node_modules/postcss-load-config/index.js:67:18
Hash: 2b260e6f43cbdf7bfbc1
Version: webpack 1.14.0
Time: 1429ms
           Asset    Size  Chunks             Chunk Names
static/bundle.js  179 kB       0  [emitted]  main
    + 9 hidden modules

ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-067de399&scoped=true!./~/postcss-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./userlist.vue
Module build failed: Missed semicolon (15:10)

  13 | 
  14 | h1
> 15 |   color: green
     |          ^
  16 |   display: flex
  17 | 

 @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-067de399&scoped=true!./~/postcss-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./userlist.vue 4:14-256

To verify that everything is installed, I created a simple test.sss file with the same styles as in the component (color: green and display: flex) and run postcss from the cli, like this: node_modules/.bin/postcss -p sugarss test.sss - it works perfectly and outputs processed CSS as expected.

As far as vue-loader config, I'm using suggestions from the bottom of the page, here: https://vue-loader.vuejs.org/en/features/postcss.html

One more thing, when I switched the style tag to SASS, it worked well and webpack compiled the component without problems.

Am I missing something in the webpack config file?

Answer 1

Your postcss.config.js is incorrect, sugarss is not a plugin, it is a parser. postcss.config.js should read:

module.exports = {
    parser: "sugarss"
}

Let me know if this doesn't work.