使用weex和vue加载sass为每个组件提供“Error:undefined:n1:n2:property missing':'”

时间:2018-03-10 04:37:41

标签: css webpack vue.js sass weex

我得到的长错列表示例

 error  in ./src/components/ico/icoSandboxThing.vue

(Emitted value instead of an instance of Error) Error: undefined:4:70: property missing ':',Error: undefined:4:70: missing '}',Error: undefined:4:219: property missing ':',Error: undefined:4:219: missing '}',Error: undefined:11:5: property missing ':',Error: undefined:11:5: missing '}',Error: undefined:13:10: property missing ':',Error: undefined:13:10: missing '}',Error: undefined:13:69: property missing ':',Error: undefined:13:69: missing '}',Error: undefined:13:218: property missing ':',Error: undefined:13:218: missing '}',Error: undefined:14:10: property missing ':',Error: undefined:14:10: missing '}',Error: undefined:14:78: property missing ':',Error: undefined:14:78: missing '}',Error: undefined:14:227: property missing ':',Error: undefined:14:227: missing '}',Error: undefined:20:40: property missing ':',Error: undefined:20:40: missing '}',Error: undefined:21:2: missing '{'

 @ ./src/components/ico/icoSandboxThing.vue 5:20-364
 @ ./.temp/router/index.js
 @ ./.temp/entry.js
 @ multi (webpack)-dev-server/client?http://192.168.1.188:8081 ./.temp/entry.js

 error  in ./src/components/ico/icoManifestThing.vue

(Emitted value instead of an instance of Error) Error: undefined:4:70: property missing ':',Error: undefined:4:70: missing '}',Error: undefined:4:219: property missing ':',Error: undefined:4:219: missing '}',Error: undefined:11:5: property missing ':',Error: undefined:11:5: missing '}',Error: undefined:13:10: property missing ':',Error: undefined:13:10: missing '}',Error: undefined:13:69: property missing ':',Error: undefined:13:69: missing '}',Error: undefined:13:218: property missing ':',Error: undefined:13:218: missing '}',Error: undefined:14:10: property missing ':',Error: undefined:14:10: missing '}',Error: undefined:14:78: property missing ':',Error: undefined:14:78: missing '}',Error: undefined:14:227: property missing ':',Error: undefined:14:227: missing '}',Error: undefined:20:40: property missing ':',Error: undefined:20:40: missing '}',Error: undefined:21:2: missing '{'

 @ ./src/components/ico/icoManifestThing.vue 5:20-365
 @ ./.temp/router/index.js
 @ ./.temp/entry.js
 @ multi (webpack)-dev-server/client?http://192.168.1.188:8081 ./.temp/entry.js

 error  in ./src/components/ico/status.vue

(Emitted value instead of an instance of Error) Error: undefined:4:70: property missing ':',Error: undefined:4:70: missing '}',Error: undefined:4:219: property missing ':',Error: undefined:4:219: missing '}',Error: undefined:11:5: property missing ':',Error: undefined:11:5: missing '}',Error: undefined:13:10: property missing ':',Error: undefined:13:10: missing '}',Error: undefined:13:69: property missing ':',Error: undefined:13:69: missing '}',Error: undefined:13:218: property missing ':',Error: undefined:13:218: missing '}',Error: undefined:14:10: property missing ':',Error: undefined:14:10: missing '}',Error: undefined:14:78: property missing ':',Error: undefined:14:78: missing '}',Error: undefined:14:227: property missing ':',Error: undefined:14:227: missing '}',Error: undefined:20:40: property missing ':',Error: undefined:20:40: missing '}',Error: undefined:21:2: missing '{'

 @ ./src/components/ico/status.vue 5:20-355
 @ ./.temp/router/index.js
 @ ./.temp/entry.js
 @ multi (webpack)-dev-server/client?http://192.168.1.188:8081 ./.temp/entry.js

这是一个包含在Vue中的组件的例子

https://pastebin.com/ZnXJSz0u

这是我的entry.js文件

https://pastebin.com/MsBAQ17U

我安装了sass-loader和node-sass,

对我来说,它看起来像是一个babel编译错误或其他什么,

我在终端中得到了一些看起来像这样的随机输出

  flex-wrap: wrap\n                position: relative\n                .value-render\n                  // color: $white\n                  color: $friendly\n                  font-size: $littleFont\n                  font-weight: 900\n                  max-height: 100%\n                  width: 100%\n                  max-width: 100%\n                  // text-overflow: ellipsis\n                  // overflow-wrap: wrap\n                  // word-break: break-all\n                  hyphens: auto\n                  white-space: pre-wrap\n                  // overflow: hidden\n                  // text-transform: capitalize\n                  \n          &.title-container\n            >.title-positioner\n              background: rgba($grey, 1)\n              >.title\n              >.type-container\n                width: auto\n                position: absolute\n                top: 10px\n                left: 0\n                padding-left: 16px\n                >.type-positioner\n                  >.type\n                    font-size: $tinyFont\n                    text-transform: capitalize\n                    color: rgba($green, 1)\n          &.description-container\n            // >.option-positioner\n            //   flex-direction: column\n            //   align-items: flex-start\n            //   justify-content: flex-start\n            //   padding: 4px\n            //   >.option\n            //     background: $grey\n            //     width: auto\n            //     padding: 10px 20px\n            //     border-radius: 18px\n            //     border-bottom-left-radius: 5px\n                \n\n          &.icons-container\n            border-radius: 0px\n    &.editing\n      >.main-container\n        background: rgba($grey, 0)\n        >.main-positioner\n          >.option-container\n            >.option-positioner\n              >.value-render-container\n                .value-render-positioner\n                  // background: $white\n                  .value-render\n                    color: $friendly\n            &.title-container\n              >.title-positioner\n                background: rgba($green, .125)\n                border: 1px solid rgba($green, .17)\n                border-bottom: 0px\n              >.type-container\n                >.type-positioner\n                  >.type\n                    color: rgba($friendly, 1)\n            &.description-container\n              // overflow: auto\n              >.description-positioner\n                padding: 5px\n\n                padding-left: 10px\n  &.value\n    &.editing\n      >.main-container\n        >.main-positioner\n          >.option-container\n            &.title-container\n              >.title-positioner\n                background: rgba($green, .125)\n                border: 1px solid rgba($green, .17)\n                border-bottom: 0px\n  &.show-options\n    >.main-container\n      >.main-positioner\n        >.option-container\n          >.option-positioner\n          &.title-container\n            .title-positioner\n              transition: all 250ms, border-radius 0ms\n          &.description-container\n            .description-positioner\n              transition: all 250ms, border-radius 0ms\n          &.inventory-container\n            &.vis\n              &:nth-last(2)\n                padding-bottom: 0px\n\n  &.tight-list-thing\n    margin-bottom: 0px\n    >.main-container\n      >.main-positioner\n        >.option-container\n          >.option-positioner\n            transition: all 300ms ease, border-radius 0ms ease\n    &.editing\n      >.main-container\n        >.main-positioner\n          >.option-container\n            &.value\n              >.value-positioner\n                border-radius: 0px\n    &:not(:last-child)\n      >.main-container\n        >.main-positioner\n          >.option-container\n            >.option-positioner\n              border-radius: 0px\n            &.icons-container\n              >.option-positioner\n                border-radius: 0px\n\n    &:first-child:not(:last-child)\n      >.main-container\n        >.main-positioner\n          >.option-container\n\n          >b:first-of-type\n            &+.option-container\n              >.option-positioner\n                border-radius: 5px 19px 0px 0px\n              &.icons-container\n                border-radius: 0px\n                \n      &.show-options,\n      &.show-value\n        >.main-container\n          >.main-positioner\n            >.option-container\n              &.title-container\n                >.title-positioner\n                  border-radius: 5px 19px 0px 0px\n              &.description-container\n                >.description-positioner\n                  border-radius: 5px 19px 0px 0px\n              &.icons-container\n                >.option-positioner\n                  border-radius: 0px\n\n      &.editing\n        >.main-container\n          >.main-positioner\n            >.option-container\n              >.option-positioner\n                >.option\n                  &.valu

所以它看起来......好吧,实际上那只是sass输出嘿,我认为}被编译为新行而不是大括号。

知道发生了什么事吗?

我的weex / webpack的config.js文件 https://pastebin.com/meGFNdet

我的utils.js文件 https://pastebin.com/9fmv7tzp

我的vue-loader.conf.js文件 https://pastebin.com/jZAtw6sk

我的webpack.common.conf.js文件 https://pastebin.com/AM3Z4EJz

我正在使用'weex-loader',而postcss设置为false,

当我回到家时,我将用jsfiddle进行测试

如果你不知道这个信息的答案,那么你能不能激励我不提供jsfiddle或足够的信息,然后询问更多信息,任何有经验的人都会知道答案,堆栈溢出是如此愚蠢尊重,只是帮助,不要放下或讨厌,如果你需要帮助以获得帮助,那么请求它

1 个答案:

答案 0 :(得分:0)

我已经更新了webpack.config.js中的一些代码以支持.scss并希望它能帮到你

module: {
    rules: [{
      test: /\.js$/,
      use: [{
        loader: 'babel-loader'
      }],
      exclude: /node_modules(?!\/.*(weex).*)/
    }, {
      test: /\.vue(\?[^?]+)?$/,
      use: [{
        loader: 'weex-loader',
        options: {
          loaders: {
            'scss': ['weex-vue-loader/lib/style-loader','sass-loader']
          }
        }
      }]
    }, {
      test: /\.we(\?[^?]+)?$/,
      use: [{
        loader: 'weex-loader'
      }]
    }]
  }

还安装了"node-sass""sass-loader"依赖