I am building a Liferay Angular portlet that uses angular material inputs and some inputs are not rendering well at all. I am guessing that some CSS/JS is missing, but I can not figure it out what exactly.
My styling css file looks like this:
#import "~#angular/material/prebuilt-themes/deeppurple-amber";
Also, when I inspect with Developer tools, I see the following warning:
Could not find Angular Material core theme. Most Material components may not work as expected.
I have also tried referencing the css file from the AppComponent with styleUrls: ["/o/<my-portlet_name>/lib/app/styling.css"], but without any luck.
So, my question is - How to reference a CSS file within an Angular Portlet in Liferay ?
I have read over and over again this article and finally I made the following changes:
changed the styling.css file into styling.scss
changed its content to #import "../../../../../node_modules/#angular/material/prebuilt-themes/deeppurple-amber"; - I am not sure why are necessary 5 of ../, I was expecting that by using ~ to know where node_modules folder is
added the following line in the property attribute of the #Component annotation in my Portlet: "com.liferay.portlet.header-portlet-css=/lib/app/styling.css" - yes, the extension is .css and not .scss
Related
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
I'm still new with web development. Right now, just new with angular. How can I change from SCSS to CSS stylesheet cause I accidently select SCSS style when I create a new angular project.
One more thing, how can I change terminal bar in VS Code from to . I tried to Google but can't find the answer.
Configuring Your Default Angular Component Extension
To have Angular default to generating components with CSS files and not SCSS files, simply edit your configuration. Keep in mind you can still use CSS syntax inside SCSS files.
ng config schematics.#schematics/angular:component.styleext css
You can also do this process by hand by editing your angular.json file
VS Code Terminal Tabs
Open your VS Code settings and search for terminal.integrated.tabs.enabled and check the option named Terminal > Integrated > Tabs.
I use nativescript with VueJs
My problem is that my page specified CSS files aren't used.
My start page is start.js and in the same folder I have a start.css
but the styles aren't applied.
Do I need to something else, or configure?
Because at the docs I said that it normally should work like this.
Always refer the appropriate docs for the flavour, since you are using Vue you must follow the docs here. What you were referring to was for core js one.
With NativeScript Vue you have to write scoped styles within your component, just the same way how you would do it for a Vue based web app.
An external file can be used as Page-Specific CSS as follows in NativeScript-Vue:
<style scoped src="./Home.css"></style>
Where, Home.css is located in your components folder.
Similarly, for SCSS:
<style lang="scss" scoped src="./Home.scss"></style>
Note: You'll need to rebuild your app by if its running on an emulator/device when you make this addition to your .Vue file.
i'm busy with a Nativescript app, i'm using the core dark theme but would like to add some font-awesome glyphicons and custom css. I import the core dark theme in my global app.css but don't seem to be able to do anything more in that file after importing the theme... I've tried to add page-specific css by adding a component-common.css to a specific page but when I add the styleUrls: [...] declaration to the component declaration I always get a runtime error... Is it possible at all to use custom css ontop of the core Nativescript theme? If so how would I go about it (using css files not inline in the xml)?
Yes, it is possible to use both a theme and custom CSS files.
For example, check this sample where in the same time theme has been applied to the top CSS file.
Better check (and/or post) your runtime error - it might show you the reason why the app is throwing. Perhaps due to non-existing paths for your styleeUrls !?
I am using the vaadin plugin for grails, and am trying to define some custom styles. Where within my grails appliction should I put the .css? My Vaadin application is in /vaadin/ I have tried creating a /vaadin/themes/mytheme/ folder and then putting my styles.css file in there, but still had no luck. Any help would be greatly appreciated. New to grails and new to vaadin, and am pulling my hair out over small stuff like this and can't get any of the actual legwork done until I can figure these things out..
Any way of doing inline styling would be fine with me too, at this point. I really just need some way to write explicit style..
Thanks
You need to put it into /web-app/VAADIN/themes/mytheme
You can have a look at the completed addressbook tutorial (with added Gorm and Spring Security Core support)
With the latest version of the plugin:
The name of the file must be styles.css (or styles.scss, which will then be compiled to styles.css by the command grails prod war)
The file must be located in /web-app/VAADIN/themes/mytheme , where the last part is the name of your style
In your UI file, use the #Theme annotation, for example
#Theme("mytheme")
#VaadinUI(path = '/')
class MyUI extends UI {
// ...
In VaadinConfig.groovy, specify the styles used by the application:
themes = ['mytheme']