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.
Related
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
I don't have a huge website, but I still want to maintain css separate from my js files.
My folder structure:
static
css
style.css
js
landing.js
In my landing.js file, I have: import styles from '../css/style.css';
With the above mentioned setup, I am getting this error:
react-dom.production.min.js:12 Uncaught Error: Minified React error #130;
Am I doing something wrong? If I must use something like webpack to avoid getting minified errors, why is that the case? Why can't I just use simple CSS?
Note: I'm not using JSX
Link the css file from your main html file where you have the root div of your app.
For importing css in .js files in reactJs env you need to set up css-loader.
But if you don't want to play around with webpack or other bundlers, include your css in html file for now.
Other variant is write inline css in your React component, or use stylesheets like Radium.
Instead of importing it in styles just include your css like this
import '../css/style.css'; // ES5
require('../css/style.css');
later after compilation it will become part of your build.
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
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.