Loading Sass Using Weex and Vue Gives a "Error: Undefined: N1: N2: Property Missing ':'" for Every Component
Example of the Long List of Errors I Get Error In. /Src/Components/Ico/icoSandboxThing. Vue (Emitted Value Instead of an Instance of Error) Error...
Example of the long list of errors I get
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? ./.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? ./.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? ./.temp/entry.js
And here's an example of one the components being included into Vue
this is my entry.js file
I have got sass-loader and node-sass installed,
to me it looks like it's a babel compilation error or something,
I've gotten some random output in the terminal that looks like this
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
So it looks like.. well no actually that's just the sass output hey, I thought that the }'s were being compiled as new lines instead of curly brackets.
any idea what's going on?
My config.js file for weex/webpack
My utils.js file
My vue-loader.conf.js file
My webpack.common.conf.js file
I'm using the 'weex-loader', and postcss is set to false,
I'll do a test with jsfiddle when I get home
can you not flame me for not providing a jsfiddle or enough info, if you don't know the answer from this info, then ask for more info, anyone with experience would know the answer, stack overflow is so dumb in this regard, just help, don't put down or hate, and if you need help in return to help, then ask for it
1 Answer
I have updated some code in webpack.config.js to support .scss and hopes it will help you
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'
}]
}]
}
Also have installed "node-sass" and "sass-loader" dependency
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
