I am getting the following error in my Angular 6 app
Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
I have imported the following theme in my app.component.css but I am still getting this error on browser's console
#import url("../../node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css");
Note the following statement about using pre-built themes in the guide:
If you're using Angular CLI, this is as simple as including one line in your styles.css file
You should have the import statement in your application's main stylesheet - styles.css - not in app.component.css. Also, note another statement in the guide:
The actual path will depend on your server setup.
Related
I have a web application developed using Vuejs/Nuxtjs. The web application has a Vue Component page named Design.vue under pages/Design.vue. This Vue component uses the styles from the assets/css/drawflow.css. Everything works perfectly fine when I run the application locally using the command npm run dev and access the application using http://localhost:5000/. I checked the sources by inspecting on Google Chrome and I see the styles page listed there.
Now, If I try to deploy the same application using the Docker, I see that my Design.vue page is not getting the styles from the assets/css/drawflow.css. I tried to inspect in Google Chrome for that page and when I see the sources, I do not see the required style sheet.
Not sure what's happening and why the styles under the assets folder are not accessible via Docker. Can someone please let me know what needs to be changed here?
Following is the way I am accessing the styles in pages/Design.vue:
<style>
#import "https://cdn.jsdelivr.net/gh/jerosoler/Drawflow#0.0.48/dist/drawflow.min.css";
#import "~/assets/css/drawflow.css";
<!-- #import "#/assets/css/drawflow.css"; -->
</style>
I was able to find the solution. The issue was happening because of the styles provided in the CDN link: https://cdn.jsdelivr.net/gh/jerosoler/Drawflow#0.0.48/dist/drawflow.min.css.
For some reason, docker was not making requests to this file due to which styles from this file were ignored. I added those styles within my drawflow.css file and added a single style. This worked perfectly fine.
<style>
#import "~/assets/css/drawflow.css";
</style>
I'm trying to implement microfrontend with Vaadin 14. I've managed to accomplish a working version thanks to the Vaadin official documentation and various examples on github, using WebComponentExporter. However I cannot find any information about using css in these exported webcomponents. I've tried putting #CssImport everywhere, with no success.
I'm pretty much in the same situation as Stuart in this unanswered Vaadin forum question: https://vaadin.com/forum/thread/18466808/cssimport-when-using-component-exporter
Since that forum is now read only, I'm hoping to find a solution here.
Try follow this tutorial https://vaadin.com/docs/v14/flow/integrations/embedding/tutorial-webcomponent-theming:
Add #Theme annotation on top of your exporter class:
#Theme(themeFolder = "my-theme")
public class MyComponentExporter extends WebComponentExporter<MyComponent> {
// ...
}
Add styles.css to your ${project.root}/frontend/themes/my-theme/ and put there your styles which will apply to your component shadow DOM (to target the document DOM, place your styles in document.css), like this:
:host {
// MyComponent's background color to blue
background-color: blue;
}
I tested it with V14 + Vaadin Portlet + Liferay 7.3 and it works in both production and dev modes. Vaadin Portlets are based on embedded components, so it should work also for regular servlet-based Vaadin applications.
Try to compile with the production profile. The microfrontends examples do not comment on it but if you are not with the production profile they do not work, at least in my case.
Check that the webpack.config.js file is not filtering the css files.
Check that the css files are in the correct frontend folder.
Then working on my new Vaadin 14 based application Intellij cannot find the built in lumo theme variables...
These variables exist at runtime in my browser, but where can I point Intellij to see them?
It looks like it's not possible, at the moment, unfortunately.
The problem is that starting from V14 styles you want to reference are packaged as.js files, but styles are written in .css. For example, if in V13 you could import them in your template like this Sizing and spacing:
<link rel="import" href="bower_components/vaadin-lumo-styles/sizing.html">
This would be the current way in V14 instead, which is a js file:
<script type=“module”>
import “#vaadin/vaadin-lumo-styles/sizing.js”;
</script>
So you can use those custom variables in your styles without problems, as long as you load an appropriate js module on your page (like this #JsModule(value="#vaadin/vaadin-lumo-styles/sizing.js") Lumo), but I haven't found a way (and not sure there is one) to make Intellij aware of them.
So the underlying problem is that you can't import a variable from a js file into a css file.
I'm using PhpStorm for a Bootstrap project.
Is there any way to make PhpStorm autocomplete get and predict CSS classes from external file without linking this file to the edited file?
Or any way to select stylesheet file and make PhpStorm use its' classes inside whole project without linking this CSS file to the edited file?
In HTML templates/partials completion includes selectors from all project stylesheets - unless you have some styles explicitly linked/embedded in your partial via <link> or <style> tag. See https://youtrack.jetbrains.com/issue/WEB-2223 and linked tickets.
Vuejs templates will be treated differently since 2017.2 - see https://youtrack.jetbrains.com/issue/WEB-25767
I have created a custom theme using Jquerymobile.com themeroller.
A mobile website which i have created using default theme values like .js and .css folders.
Now i want to change that theme of my website to my new custom theme,created using themeroller.
How to include those files to my coding?
When you download the themerolloer that you create, there is a sample index.html file that uses the theme that is enclosed. Look at that to see what files need to be included in your page, but more importantly, look at that code to see what CSS classes are being used - no point in including them in your page if you aren't using using the Themeroller classes
You can see all the steps, and a full tutorial on the Getting Started page