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
Related
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";
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.
I am trying to bundle css files with webpack extract-text-webpack-plugin it works great with local files that are int (projects)/src/assets/styles, but I also need bootstrap.css from node_modules and if I try adding it to import b from 'bootstrap/dist/css/bootstrap.css'; the plugin just throws an error that sounds something like this "bootstrap.css Unexpected token (7:5) You may need an appropriate loader to handle this file type." If I add '!style!css!' as described in this question
Webpack Error while including bootstrap 3 it does work, but now it is injected in index.html which may slowdown the overall app. So how do you correctly load the bootstrap style from node_modules? I tried copying it with copy-webpack-plugin, but the copying is performed after the loaders have done their job. so any suggestions?
With a bit more research and debuging the problem was in css loader path, which was pointed to the app source directory, that is why it could not access the node_modules.
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?
I'm trying to install a local copy of bootstrap into a meteor project to make it easier to customise it.
I was using the bootsrap-3 smart package and it was working pretty well, so removed that, created the directory tree and files described in Use Twitter Bootstrap 3 RC1 with Meteor and executed meteor add bootstrap which displayed the text from the summary string, but, no bootstrap is included in the project.
I added bootstrap with
git submodule add git://github.com/twitter/bootstrap.git public/bootstrap
and adjusted the paths appropriately in the packages/bootstrap/package.js file (even tried absolute paths to try and get it to work).
package.js looks like
Package.describe({
summary: "Load locale bootstrap scripts"
});
Package.on_use(function(api) {
api.add_files('../../public/bootstrap/dist/js/bootstrap.min.js', 'client');
});
I'm missing something, but struggling to find it.
Peter
You could stick to the standard way of creating packages by just putting Bootstrap 3's css, fonts, and js directories at the top-level of your package directory, and link to them like this in package.js:
api.add_files('css/bootstrap.css', 'client');
api.add_files('js/bootstrap.min.js', 'client');
...
If you care about the icons, add the fonts the same way. Then, create an override css file which loads last, overriding the paths to the icons in the Bootstrap css. An example of this override file is in Meteor's official Bootstrap 2 package, here. Also see the package.js file from the same, here (though I think you could skip using NPM to concatenate the path names).
One easy way to add bootstrap is just to place the files in your client directory, probably at client/lib. That is the simplest way if you are going to maintain and customise the files yourself. You will probably want both the .css and .js from bootstrap.
For a package, I would look at bootstrap3-less. It can be added with meteorite and gives you the less files which you can customise. If that doesn't suit you then you can at least see how the package.js there looks and how the package is organised.