Компонент Vue для одного файла и SugarSS из PostCSS с помощью Webpack

Question

Я пытаюсь использовать SugarSS в отдельных компонентах Vue и Webpack 2, но пока не повезло. Вот мой компонент файла:

<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">, но не повезло. Вот код ошибки при запуске 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 

Чтобы проверить, что все установки, я создал простой test.sss файл с теми же стилями, как в компоненте (цвет: зеленый и дисплей: сгибать) и запустить postcss из cli, вот так: node_modules/.bin/postcss -p sugarss test.sss - он отлично работает и выводит обработанный CSS как ожидалось.

Насколько вя-загрузчик конфигурации, я использую предложение от нижней части страницы, здесь: https://vue-loader.vuejs.org/en/features/postcss.html

еще одно, когда я коммутируемой тег стиля к SASS, он работал хорошо и WebPack скомпилирован компонент без проблем.

Я что-то пропустил в файле конфигурации webpack?

Answer 1

Ваш postcss.config.js неверен, сахара не является плагином, это парсер. postcss.config.js следует читать:

module.exports = { 
    parser: "sugarss" 
} 

Позвольте мне знать, если это не работает.