Vue単一ファイルコンポーネントとWebpackを使用したPostCSSのSugarSS

Question

私はVueの単一ファイルコンポーネントとWebpack 2でSugarSSを使用しようとしていますが、これまでのところ運がありません。ここに私のコンポーネントファイルの：

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

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

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

は、ここに私の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") 
      } 
      } 
     } 
     } 
    ] 
    } 
} 

私も同じディレクトリに、念のためpostcss.config.jsを持っている：

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

私は<style scoped lang="sugarss">を使ってみましたが、幸運もありませんでした。私は、コンポーネントと同じスタイルでシンプルなtest.sssファイルを作成し、

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 

そのすべてを確認するには、インストールされています。ここでは、エラーコードが実行されているWebPACKのです（色：緑とディスプレイ：フレックス）とpostcssを実行しますこのように、- 完全に動作し、期待どおりに処理されたCSSを出力します。 https://vue-loader.vuejs.org/en/features/postcss.html

もう一つは、私はSASSにスタイルタグを切り替えたときに、それがうまく働いたとのWebPACKはコンパイル：限りVUE-ローダーの設定として、私はここでは、ページの下部からの提案を使用してい

問題のないコンポーネント。

webpack設定ファイルに何か不足していますか？

Answer 1

postcss.config.jsは正しくありません。糖鎖はプラグインではなく、パーサーです。 postcss.config.jsは読んでください：

module.exports = { 
    parser: "sugarss" 
} 

が、これは動作しない場合は、私に教えてください。