Question

我试图使用Webpack在VueJS单文件组件的<style>标签中隐藏SCSS样式。我试图在我的Webpack构建的vue-loader任务中调用webpack loader scsslint-loader作为preLoader。

单文件vue.js组件....

<template lang="pug">
  ...
</template>

<script>
  ...
</script>

<style lang='scss'>

   @import '/scss/core/colors';

  .email {
    color: $primary_color;
    width: 320px;
  }

</style>

在Webpack（2.5）中，vue-loader配置看起来像......

module: {
  rules: [
    { test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        preLoaders: {
          'scss': 'scsslint-loader',
          'sass': 'scsslint-loader'
        },
        loaders: {
          'scss': 'vue-style-loader!css-loader!sass-loader',
          'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
        },
      }
    }
  ]
},

运行Webpack的结果......

undefined:1
No such file or directory @ rb_sysopen - ;
^

SyntaxError: Unexpected token N in JSON at position 0
    at JSON.parse (<anonymous>)
    at linterResults (C:\wamp\www\spreadless\node_modules\scsslint-loader\dist\scsslint-loader.js:20:28)
    at C:\wamp\www\spreadless\node_modules\scsslint-loader\dist\scsslint-loader.js:57:13
    at ChildProcess.exithandler (child_process.js:277:5)
    at emitTwo (events.js:125:13)
    at ChildProcess.emit (events.js:213:7)
    at maybeClose (internal/child_process.js:897:16)
    at Socket.stream.socket.on (internal/child_process.js:340:11)
    at emitOne (events.js:115:13)
    at Socket.emit (events.js:210:7)
    at Pipe._handle.close [as _onclose] (net.js:549:12)

问题是......

我是否正确调用scsslint-loader作为Webpack配置中的vue-loader {preLoader}？
如果有任何想法导致无文件错误

带有Webpack的VueJS单文件组件中的Lint SCSS

0 个答案: