Vue单文件组件和SugarC从PostCSS与Webpack

我想在Vue单文件组件和Webpack 2中使用SugarSS，但到目前为止没有运气。这是我的组件文件：Vue单文件组件和SugarC从PostCSS与Webpack

<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预期。

至于VUE装载机配置，我使用的是从页面的底部，在这里建议：https://vue-loader.vuejs.org/en/features/postcss.html

还有一两件事，当我换了风格标签SASS，它的工作很好，编译的WebPack该组件没有问题。

我是否缺少webpack配置文件中的内容？

来源

2016-12-22 Piotr Kempa

嗯，你是否已经安装了webpack的postcss-loader？我认为它没有与vue-loader打包在一起。 –

您的postcss.config.js不正确，糖不是插件，它是一个解析器。 postcss.config.js应改为：

module.exports = { 
    parser: "sugarss" 
}

让我知道这是行不通的。

来源

2016-12-29 00:57:43 RyanZim

Vue单文件组件和SugarC从PostCSS与Webpack

回答

相关问题