Загрузка sass с использованием weex и vue дает сообщение «Ошибка: undefined: n1: n2: свойство отсутствует ':'» для каждого компонента

Пример длинного списка ошибок, которые я получаю

 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, эй, я думал, что символы} компилируются как новые строки вместо фигурных скобок.

есть идеи, что происходит?

Мой файл config.js для weex / webpack 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 или достаточно информации, если вы не знаете ответ из этой информации, затем запросите дополнительную информацию, любой, у кого есть опыт, знает ответ, переполнение стека настолько глупо в этом отношении, просто Помогите, не подавляйте и не ненавидьте, и если вам нужна помощь взамен, попросите об этом

css webpack vue.js sass weex

10.03.2018 05:37

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

122

Ответы 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"

Я перешел на квазар, мне очень жаль, weex выглядит потрясающе из-за своей естественной природы, но на данный момент квазар намного дальше в разработке, возможно, они смогут работать вместе в будущем, мы все ненавидим тратить время. Большое спасибо за ваш ответ <3

— 05.04.2018 13:26

27.03.2018 15:25