I'm trying to apply platform-specific-css in my Nativescript Angular Mobile App.
For example, for the home component, currently I have home.component.tns.css to style it. But I also need to handle some styles separately for IOS and Android.
Here's what I have tried:
Add a css file named as home.component.ios.tns.css. Not working, the css in this file won't be applied.
Add a css file named as home.component.ios.css. This time the css is applied. But I lost the css in home.component.tns.css
I import home.component.tns.css in home.component.ios.css like this: #import './home.component.tns.css'; This time I got an error saying NativeScript encountered a fatal error: Error: Could not resolve home.component.tns.css
I guess I wasn't using the platform specific css in the right way. Anyone can help?
Unless you are doing a shared-project (web + NS in 1 project).
To set up platform specific styling in NativeScript you need to name your files like this:
home.component.ios.css
home.component.android.css
In your home.component.ts you'll set up your styles binding like this:
styleUrls: ['./home.component.css']
NativeScript will take the respective platform .css file and generate the contents of the base home.component.css file with the platform specific style sheet .ios.css or .android.css.
You can't import home.component.tns.css because there will only by home.component.css available.
You can put all your css in home.component.ios.css.
Or you can use the .android and .ios classes like :
.ios .myClass {
background-color: red;
}
.android .myClass {
background-color: blue;
}
The platform specific files should be like:
yourcustom.component.css
styles.component.ios.css
styles.component.android.css
Related
I am using node-sass-middleware and so far i had one scss file and it was working just fine. Now created another scss file and using the second file link on top the first file using this.
#media screen and (min-width: 769px) {
.quizes-container {
justify-content: space-between;
.card {
width: 32.5%;
}
}
.quiz-container-title {
div {
padding-right: 1em;
}
}
}
and imported like this #use 'media_queries';
However in my .css output the codes from the second file is not showing at all.
I am really confused.
SCSS files need to be imported using the #import keyword.
#import "media_queries";
node-sass-middleware uses node-sass for compiling sass to css, However node-sass is deprecated.
Warning: LibSass and Node Sass are deprecated. While they will
continue to receive maintenance releases indefinitely, there are no
plans to add additional features or compatibility with any new CSS or
Sass features. Projects that still use it should move onto Dart Sass.
and even node-sass-middleware is dead (I think) because there is no activity and no new releases.
Github Open Question
If you want to continue with this then you need to use old #import syntax, the new syntax #use will not work.
#import "media_queries";
Or switch to new Dart Sass
Implementing node-sass-middleware with new dart sass, use this gist, create new file (sass-middleware) and add the content to newly created file, then import it like this, then you are good to go.
/*index.js*/
//const sassMiddleware = require('node-sass-middleware');
const sassMiddleware = require('./sass-middleware');
Note: That gist I have created is a copy of node-sass-middleware but with new dart sass implementation, So all credit goes to node-sass-middleware
I am working on Asp.net Core With Angular 6 Project
I installed ngx-admin template to angular Project
then includes scss style in my global style like this
#import '~#nebular/theme/styles/globals';
#include nb-install() {
#include nb-theme-global();
};
when I run the project I got this error :
Microsoft.AspNetCore.SpaServices[0]
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
any Help !?
This error indicates you are loading a CSS file. It's possible one of you above imports is importing a CSS file.
#import "foo.css";
Which basically is converting it to.
#import url(foo.css);
If you want to import the contents of a CSS file into the output CSS then it's recommended just reference the CSS file directly in your angular.json in the "styles": [] section.
Today I've started using ionic 3 for the first time. I don't really know anything about it, so that's why I wanna learn how it works.
I've created a sidemenu project and now I want to add some global styling in my app.scss, so I can use it in any page of my project. Well, I've added simple styling to my app.scss but nothing happens on my page. Everything still looks the same. Now my question is: Do I have to import the app.scss somewhere? If so, where? Or how can I use the app.scss?
I thought it would happen automatically, that my page uses also the classes of my app.scss and not only of it's own stylesheet, but to me it seems like it doesn't even know the classes of the app.scss.
within the app.scss you can create class use them normally as class="class-name" on html.
Hope I helped you.
You can just use it, no need to import it anywhere. A few things to keep in mind though:
There are things you would like to add at a global scope like for example if you want to enable newlines in toast messages you add the following:
.toast-message {
white-space: pre-line;
}
If you want to add something only for iOS you add it as a sub element of the ios class:
.ios {
... // your iOS-specific css rules
}
If you want to add somehing only for Android (material design) you add it as a sub element of the md class:
.md {
... // your android-specific css rules
}
An there is also a wp class for windows phone if you should need it.
Make sure you have a look at ionics theming docs.
Adding color modifier classes to Bulma's navbar is supposed to change the background color (as mentioned here: http://bulma.io/documentation/components/navbar/#colors).
I find that this is working fine if I use the css version. But I"m using the sass version and it is not working.
Any idea why not?
Note -- this is also an unanswered issue on Github: https://github.com/jgthms/bulma/issues/1192
You have to create file like my-bulma-theme.scss, then override needed variables or import other .scss files with variables and finally, import bulma from node_modules and include that my-bulma-theme.scss in your pages/preprocessor.
For example my-bulma-theme.scss:
$navbar-background-color: #f0f0f0;
$another-bulma-variable: 14px;
#import './another-style-variables.scss';
#import '../node_modules/bulma/bulma.sass'; // must be the last thing in file
I updated to version 0.5.2 of Bulma and now it works as it should.
I am attempting to simply change the colour of the "is-primary" class in bulma. I am attempting to write a scss file to change the values without installing bulma via npm. I am attempting to import by using the cloudfare link, is this possible?
this is my scss file:
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4./css/bulma.cssbulma/sass/utilities/initial-variables";
$tech-blue : #2c3e50;
$primary : $tech-blue;
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css";
This file compiles but I cannot find the corresponding css file and makes no affect to my actual page.
I don't think that this is possible. The variables in use by Bulma are only accessible by SCSS. So you need to build the whole thing to have your colors blend in. The rendered CSS already contains:
a {
color: #00d1b2; /* can't change that later on */
…
}
A feature request for Bulma would be to make those variables accessible via CSS variables. That way you could easily customize the look even with the pre-rendered CSS from the CDN.