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">，但也没有运气。这是运行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文件，其样式与组件中的颜色相同（color：green和display：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不正确，糖不是插件，而是解析器。 postcss.config.js应为：

module.exports = {
    parser: "sugarss"
}

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

使用Webpack从PostCSS获取单个文件组件和SugarSS

1 个答案: