Nativescript-theme-core css is not being imported

[RosilBelli]

Version

N/A

Reproduction link

https://github.com/RosilBelli/Issue-Code

Platform and OS info

Android 8 / NS 4 / Windows 10

Steps to reproduce

Commented the default SCSS import;

Added:
@import '~nativescript-theme-core/css/core.light.android.css';

What is expected?

CSS classes to be available and working

What is actually happening?

Not working

---

Even though importing the theme css in styles.scss file, it is not applied to the ui and I can't figure out why.

[rigor789]

Can you try without the ~ in the path? I suspect that has been changed somewhere recently (can't recall)

[RosilBelli]

I had already tried without (build error) and with a / (build is ok) but it still does not work.

[rigor789]

Okay, was worth a try. Will check this later!

[benc-uk]

Having the same issue
Creating a vanilla app from the template I'm not seeing any of the styles applied correctly

[benc-uk]

Ok, I removed the ~ and it briefly worked. Then I made a small change to styles.scss and the app is bust again and none of the list item styles are being applied

This is my first time trying nativescript-vue and it is driving me crazy, the behaviour seems both broken out of the box and also random

my styles.scss looks like

// NativeScript core theme
// @see https://docs.nativescript.org/ui/theme
@import 'nativescript-theme-core/scss/light';

// Override variables here

@import 'nativescript-theme-core/scss/index';

// Global SCSS styling
// @see https://docs.nativescript.org/ui/styling

.foo {
  color: red;
}

I've tired the .css files too e.g. @import '~nativescript-theme-core/css/core.light.android.css'; that also doesn't work

Trying with and without the ~ also makes no difference

[benc-uk]

There's a tonne of open bugs relating to this
NativeScript/nativescript-dev-webpack#473
and
NativeScript/nativescript-dev-webpack#545

I think I've got it working

styles.scss

@import '~nativescript-theme-core/scss/light';
@import '~nativescript-theme-core/scss/index';
@import '~nativescript-theme-core/scss/platforms/index.android';

Importantly I've added

import "./styles.scss";

To main.js

[rigor789]

We've added the import of styles in #93 to main.js

[RosilBelli]

But it was already on my main.js file when I opened the issue.
Does doing that worked for you?

[rigor789]

@RosilBelli it was missing from the latest iteration of the template, as for the theme core, I haven't looked into it yet (I don't use it in any of my projects)...

I will look into it further when I get the chance, thus leaving the issue open!

[RosilBelli]

@rigor789 thank you for your clarification and sorry for the off-topic question, but how do you usually style your projects? As a Nativescript beginner, I few a little bit lost on that.

[rigor789]

@RosilBelli I personally find Tailwind a really neat solution to css. I have made nativescript-tailwind which is a default build of tailwind only containing classes that are supported in NativeScript. I usually use a combination of these classes to get the results I'm looking for.

The nativescript-tailwind package is not fully complete, I would like to change it in the near future to allow you to use your own tailwind config, so you can change the colors, sizes etc more easily.

[prinzt]

There's a tonne of open bugs relating to this
NativeScript/nativescript-dev-webpack#473
and
NativeScript/nativescript-dev-webpack#545

I think I've got it working

styles.scss

@import '~nativescript-theme-core/scss/light';
@import '~nativescript-theme-core/scss/index';
@import '~nativescript-theme-core/scss/platforms/index.android';

Importantly I've added

import "./styles.scss";

To main.js

This works, but that way the android styles will be applied on ios, too.
I wonder how we should handle platform specific imports.
Maybe use conditional requires instead of import?
I asked this in #93 too.

[prinzt]

For platform globals the following worked for me in main.js:

const platformModule = require("tns-core-modules/platform");

// import global basic styles
import "./scss/styles.scss";

if (platformModule.isAndroid) {
  // android specific styles
  require("./scss/styles.android.scss");
} else if (platformModule.isIOS) {
  // ios specific styles
  require("./scss/styles.ios.scss");
}

In styles.android.scss and styles.ios.scss i respectively import the platform styles (a.e. @import '~nativescript-theme-core/scss/platforms/index.android';)

[nativescript-vue-bot]

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.