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">，但也不走运。这是运行ning 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 文件，其样式与组件中的样式相同（颜色：绿色和显示：flex）和来自 cli 的运行 postcss，像这样：node_modules/.bin/postcss -p sugarss test.sss - 它完美地工作并且输出按预期处理 CSS。

就 vue-loader 配置而言，我使用了页面底部的建议，此处：https://vue-loader.vuejs.org/en/features/postcss.html

还有一件事，当我将样式标签切换为 SASS 时，它运行良好并且 webpack 编译组件没有问题。

我是不是在 webpack 配置文件中遗漏了什么？

Answer 1

你的postcss.config.js不正确，sugarss不是插件，它是解析器。 postcss.config.js 应改为：

module.exports = {
    parser: "sugarss"
}

如果这不起作用，请告诉我。

Vue 单文件组件和来自带有 Webpack 的 PostCSS 的 SugarSS

Vue single file component and SugarSS from PostCSS with Webpack

webpack

vue.js

postcss

webpack-2

vue-component