All styles are insert inline in index.html - javascript

I am working on reactJs app. When running while using dev flag, my stylesheet is inserted in head of index.html page. So styles are adding twice. app.css contains same styles but these should be be injected as inline.
Here is screenshot http://prntscr.com/l6y8h9

react-app then it will automaticly bind all your imported css files to your index.html. You can clear the one you manually added

Related

Adding javascript component into angular app

I'm having a javascript components that is distributed as .js file and .css file. In .js file the component is added to window
window.Component = { ... }
the component should be added to page with the following code Component.init('#componentHolderId', config);
I need to use my component in an Angular app (using Angular 11 if that matters).
Here are my questions.
Where is the best place in angular app to put .js file? Maybe it's somehow possible to add it to lazy-loaded module (as component needs to be used in a lazy-loaded module)?
Is there a way to add css to project other that adding it to styles array in angular.json? My concern here is that this way will slow-up application start-up.
You can add your .js file in the Scripts array of angular.json. so that it will be loaded.
Or you can add the .js inside the script tag inside body tag of index.html. (Sometimes it won't work because the some dom elaments are not present when loading index.html).
If you are using SCSS or any other CSS preprocessors, you can import your CSS files in your styles file.

How to connect reactjs file with css

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.

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.

angular 4 project with custom html theme

I am trying to create a angular 4 project from angular cli and I am trying to import a custom html theme.Theme has and css files js files and some font files. Where put all those files?? in asset folder?? And after that I will import them in index.html as script and links? With that way I am getting some errors "can't resolve the dependencies" like fonts.Exist other way more efficient and "more right" for the angular standards like through angular-cli.json or something else??
I have searched everywhere how I do this but no luck.
Firstly generate new component and you can use this component to design your own template and to add own CSS
as follow:-
firstly generate new component ng g component mycomponent
new component will be created like below :-
mycomponent
mytest.component.css
mytest.component.html
mytest.component.spec.ts
mytest.component.ts
then you can add your styles at .CSS file, your all template at .html file and all logical content at .ts file
you can add this component at index.html
<app-mycomponent></app-mycomponent> // app-yourcomponent name
when you create the project i wonder you have a src folder. Inside this folder you have an assets folder: here you can paste all the code and images from your html code.
Next, you have these options:
Import the static files of your html theme one by one on the index.html in this way:
and so on..
In your angular-cli.json file:
"scripts": ["../src/assets/js/jquery.min.js"],
and so on with all your code scripts. The css styles have a styles array in the same angular-cli.json file.
Last but not least, if your html theme have images and other static content incorporated, you can access all this content in this way:
<img src="../src/assets/images/logo.png" alt=""></a>
so, you access the local folder of any file with ../ and if you want to access a superior folder you can use ../../ and so on until you get in the root folder.

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