search

NativeScript / nativescript-dev-sass

SASS CSS pre-processor for NativeScript projects
Apache License 2.0
44 stars 17 forks source link

CSS styling failed, missing '{' #89

Closed mikerockett closed 3 years ago

mikerockett commented 6 years ago

Platforms & Devices

Android, iOS; emulator (standard), device (Huawei P10 Lite)

Version Numbers

Dependencies:
┌────────────────────────────────┬────────────────┐
│ Plugin                         │ Version        │
│ nativescript-feedback          │ ^1.2.0         │
│ nativescript-iqkeyboardmanager │ ^1.3.0         │
│ nativescript-loading-indicator │ ^2.4.0         │
│ nativescript-theme-core        │ ^1.0.4         │
│ nativescript-vue               │ ^2.0.0-alpha.3 │
│ tns-core-modules               │ ^4.2.0         │
│ vue-router                     │ ^3.0.1         │
│ vuex                           │ ^3.0.1         │
└────────────────────────────────┴────────────────┘
Dev Dependencies:
┌────────────────────────────────────┬───────────────────────┐
│ Plugin                             │ Version               │
│ @babel/core                        │ ^7.0.0                │
│ @babel/preset-env                  │ ^7.0.0                │
│ babel-loader                       │ ^8.0.2                │
│ babel-traverse                     │ 6.26.0                │
│ babel-types                        │ 6.26.0                │
│ babylon                            │ 6.18.0                │
│ clean-webpack-plugin               │ ^0.1.19               │
│ copy-webpack-plugin                │ ^4.5.2                │
│ css-hot-loader                     │ ^1.4.2                │
│ css-loader                         │ ^1.0.0                │
│ lazy                               │ 1.0.11                │
│ mini-css-extract-plugin            │ ^0.4.1                │
│ nativescript-dev-sass              │ ^1.6.0                │
│ nativescript-dev-webpack           │ ^0.17.0-2018-09-12-01 │
│ nativescript-vue-template-compiler │ ^2.0.0-alpha.3        │
│ nativescript-worker-loader         │ ~0.9.0                │
│ node-sass                          │ ^4.9.2                │
│ sass-loader                        │ ^7.1.0                │
│ tns-platform-declarations          │ ^4.2.0                │
│ uglifyjs-webpack-plugin            │ ~1.2.7                │
│ vue-loader                         │ ^15.2.6               │
│ webpack                            │ ^4.16.4               │
│ webpack-bundle-analyzer            │ ~2.13.1               │
│ webpack-cli                        │ ^3.1.0                │
└────────────────────────────────────┴───────────────────────┘

Recreation

Crete a new app using the master vue-cli-template.

Create app.ios.scss and app.android.scss in the root. Then create scss/_index.scss with any theme and the core-theme index. Run with tns run <android|ios> --bundle, and the following error occurs:

Error: Css styling failed: Error: undefined:1:16: missing '{'

App runs, but styling is not correct.

There are no other errors anywhere. Closest thing to anything CSS related is the succesful build through mini-css-extract-plugin:

Child mini-css-extract-plugin ../node_modules/css-loader/index.js??ref--3-3!../node_modules/sass-loader/lib/loader.js!app.scss:
    Entrypoint mini-css-extract-plugin = *
    [../node_modules/css-loader/index.js?!../node_modules/sass-loader/lib/loader.js!./app.scss] ../node_modules/css-loader??ref--3-3!../node_modules/sass-loader/lib/loader.js!./app.scss 19.6 KiB {mini-css-extract-plugin} [built]

Further information

If I comment the theme reference from the top of _index.scss, the error goes away, but then of course it will complain that variables are missing. I examined the resulting app.scss file, and VS Code only complained about non-standard properties - nothing about braces anywhere.

In other issues and support threads, I've read about this being the result of empty SCSS files, though adding a rule doesn't appear to help (if it did, I'd have skipped opening this issue).

A full platform remove doesn't help either.

I'm not having any issues with infinite loops (given the resolution of #53 - Chokidar appears to be working in this case).

Is there any more information you'd like me to provide to trace this down? Could it actually be a problem with my JS?

Thanks in advance 😃