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

Question

我得到的一长串错误的例子

 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 或足够的信息而激怒我，如果你不知道这个信息的答案，然后询问更多信息，任何有经验的人都会知道答案，堆栈溢出在这方面太愚蠢了尊重，只是帮助，不要贬低或憎恨，如果你需要帮助以返回帮助，那就要求吧

Answer 1

我已经更新了 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" 依赖