App can't load Angular material theme - javascript

I want to use Angular Material in my MEAN stack app, but I get the following error:
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
In my Angular CLI apps I manage to work with Angular material, but with this app I just can't seem to make it work. It is probably because of the structure of the app:
As you can see on the image I tried with the #import statement. On the homepage I put a checkbox Material item (here named jjjjjj), but as you can see it doesn't have the theme so it doesn't look good.

I had the same problem and for me it works try to add this line instead:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
you can choose here the theme you want to apply
Material theme

I had the same problem, and it was because I was trying to import the material theme into the css file of one of my components. Moving the import statement to the top-level styles.css file worked.
#angular/core 6.0.0
#angular/material 6.4.1
Add the line below to the file src/styles.css:
#import "#angular/material/prebuilt-themes/indigo-pink.css";

Related

How can I use Bootstrap in Vue components?

I put the same html (with Bootstrap 4.5.2) in these 2 places.
index.html
App.vue
In index.html, the Bootstrap style works. In App.vue, the space between buttons fails. I fixed this by adding class mr-1 to the buttons. How do I avoid having to fix normal Bootstrap when putting it in components?
what I tried (with the same result)
Added official BootstrapCDN code to index.html
Added this to main.js and installed the modules
import jQuery from "jquery";
global.jQuery = jQuery;
let Bootstrap = require("bootstrap");
import "bootstrap/dist/css/bootstrap.css";
Added this in the <style> section of App.vue
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
Momin's suggestion:
installed everything in the project folder dir
npm install bootstrap jquery popper.js
added this to the top of main.js:
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
If you need Bootstrap, just go with BootsrapVue which does the heavy lifting for you.
Should you still be open for other choices, Vuetifyjs is a really good framework with much to offer.
Adding bootstrap styles and javascript
In your project directory install Bootstrap and its dependencies.
npm install bootstrap jquery popper.js
If you’re not going to use Bootstrap’s JavaScript and only going to use its styles, don’t worry about installing jQuery or Popper.js
Finally, import it into the main script by adding these lines to the top of project/src/main.js:
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
Repeat, if you just want the styles and not the JavaScript functionality, just drop off the first line and only include the CSS.
BootstrapVue is a good choice, but it really is up to you. People can suggest other alternatives all day (e.g Tailwind Vue). BootstrapVue is nice because if you are already familiar with Bootstrap you will be mostly familiar with BootstrapVue straight away. Again, if it does work for your purposes then go with it.
I personally like the feature of including just what you need.
Read more about that in the BootstrapVue docs ‘Individual components and directives’ here: https://bootstrap-vue.org/docs#component-groups-and-directives-as-vue-plugins

MEAN app: Can't find theme in Angular material

So I just discovered Angular material. I wanted to set it up, but the browser can't load the Angular material theme. It gives me the following error:
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
And,
Resource interpreted as Stylesheet but transferred with MIME type
text/html:
"http://localhost:3200/node_modules/#angular/material/prebuilt-themes/indigo-pink.css".
First, here is the structure of my project:
As you can see I added a element with a link to the indigo-pink theme in the index.hbs file. Before that I tried to import the theme into my styles.css file in the public folder with
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
Both ways ended up giving me the same above error. Does someone see what I'm doing wrong?
You definitely cannot refer to node_modules in the index.html. #import would be the correct way. Looks like you're using Webpack and not Angular CLI which would make this work automatically, so you need to find a Webpack plugin that handles #import and bundles the styles together, or if you have one, fix your webpack config. Try: https://github.com/webpack-contrib/css-loader

Draft.js styles not working

I'm trying to use Draft.js with the Image plugin. Here are my problems.
I manage to get it to work, but the styles aren't loaded and the editor takes the whole page and the buttons aren't styled.
I load the styles from the provided CSS
import './Draft.css';
import editorStyles from './editorStyles.css';
import 'draft-js-image-plugin/lib/plugin.css';
But it doesn't do anything.
I'm working with Create React App, so style-loader and css-loader should be working fine.
Thanks for the help.
About styles in draft-js-image-plugin/lib/plugin.css. It looks like a mistake in the plugin documentation. We can read there:
The plugin ships with a default styling available at this location in
the installed package:
node_modules/draft-js-image-plugin/lib/plugin.css
But if we check this file in our node_modules directory, we see that this file is empty. No any styles.
About other styles. Check that you have Draft.css and editorStyles.css files and this files located in the same directory that your component. Do you have some errors in the console? It would be great if you provide full your code.

How to integrate Bootstrap CSS in an Angular application

I have two similar very small example Angular applications that integrate Bootstrap CSS. One works and one that I created myself doesn't. It is unclear what the difference is and why it doesn't work in my case.
My steps are as follows:
npm install bootstrap --save
This updates package.json and then subsequently I update index.html and add
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
Exactly the same line as the working application but in example app that I created using ng new new-app it is not working.
Network tab in chrome shows 404. Basically the URL http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css cannot be found.
What is the correct / complete way to integratie Bootstrap CSS in an Angular app?
It seems you are using angular & angular cli
If this is the case then you can actually add the bootstrap.css file in .angular-cli.json inside array corresponding to style key like this
"styles": [
"styles.less",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Two other possibilities are importing this bootstrap.css at main .css file using #import or you can require this in the main index.js file.
Since you are using Angular-CLI:
update your .angular-cli.json file to include the bootstrap style:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
],
No need to include it in your index.html

CSS not loading for React Foundation Apps

I have installed React Foundation Apps according to the docs:
http://webrafter.com/opensource/react-foundation-apps/install
I had to fiddle with the webpack.config.js file to make it parse .jsx files but now the module is working, except that no CSS is added. I'm trying to use the Modal but it just shows up on the page with no styling applied.
What can I have missed?

Categories

Resources