将Webpack Importer添加到Vue CLI Project

时间:2017-04-04 23:03:26

标签: webpack vue.js

我目前正在尝试在Vue CLI项目中使用node-sass-json-importer。这样我就可以在JavaScript和SCSS样式之间共享颜色值:

style-vars.json

{  "bgColor": "red"  }

component.vue

<style lang="scss" scoped>
  @import './style-vars.json';
  body { color: $bgColor; }
</style>

我已尝试通过修改此块将此导入程序添加到build/utils.js作为导入程序:

  // Top of file
  var jsonImporter = require('node-sass-json-importer')

  // ...
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { importer: jsonImporter, indentedSyntax: true }),
    scss: generateLoaders('sass', { importer: jsonImporter }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

但是json文件永远不会被导入器转换。

我总是看到以下错误:

Module build failed:
{
^
      Invalid CSS after "{": expected 1 selector or at-rule, was "{"

我应该在哪里修改构建脚本以正确添加此导入程序?

0 个答案:

没有答案