How to connect reactjs file with css - javascript

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.

Related

How to extract CSS to a `critical.css` stylesheet via an `import` statement with Webpack?

Background
Our web application follows a component-based design pattern, with each component containing a template, Sass partial, and JavaScript module, like so:-
components/action_button/_action_button.html.erb
/_action_button.scss
/action_button.js
The JavaScript module imports the component's Sass partial and the template is rendered via Rails. Webpack is configured with a number of loaders and plugins to compile the styles and extract (via mini-css-extract-plugin) the resulting CSS into a standalone stylesheet for each entrypoint e.g.:-
home.js => home.js, home.css
search.js => search.js, search.css
Components are imported into entrypoints based on usage (i.e. if action_button is present on 'home', then it's rendered somewhere within the view and import '~/components/action_button/action_button.js'; is declared within home.js.
The Problem
In order to improve the page loading experience we're manually #importing a select few component Sass partials into a critical.scss entrypoint, the outputted CSS is then inlined into the <head> of the document and the full stylesheets are loaded asynchronously.
Ideally, we'd like to do this dynamically and one method I've thought of is denoting the criticality of a component via the import statement. Perhaps using a custom loader?:-
import 'critical-loader!~/components/action_button/action_button.js';
The issue is that I've little idea of how that Webpack loader would work. I essentially want it to leave all existing rules in-place, but redirect the extracted CSS from Sass partials imported from within it to critical.css.
Does anyone know of an existing solution or have any idea of where to begin with a problem like this?

How to import bootswatch themes into react-bootstrap?

I created a basic React application using CRA and react-bootstrap. I would like to load different bootswatch themes. All themes are downloaded and placed inside a src/themes folder. Each theme has its own folder with fixed set of filenames:
src/themes/
superhero/
_bootswatch.scss
_variables.scss
bootstrap.css
bootstrap.min.css
/cerulean
_bootswatch.scss
_variables.scss
bootstrap.css
bootstrap.min.css
and so on...
Now suppose I want to load superhero theme. This can be done in different ways which I show below:
I renamed index.css of CRA to index.scss and added the following lines to the top of the file (I have node-sass installed):
#import "./themes/superhero/variables";
#import "~bootstrap/scss/bootstrap";
#import "./themes/superhero/bootswatch";
I add the following line to index.js:
import './themes/superhero/bootstrap.min.css'
Both of these methods are working fine independently. What I want to do is to import them in index.js like this:
import './themes/superhero/_variables.scss'
import 'bootstrap/scss/bootstrap.scss';
import './themes/superhero/_bootswatch.scss'
When I do this, the first two lines get imported properly but I receive undefined variable errors when it comes to the third import, _bootswatch.scss. This is because the first two files are independent. I think there are dependent variables in the third file but on each import they are somehow scoped differently and hence the last import does not have access to the variables. This is not the case for method 1, they are all imported to a single file and then node-sass takes care of them.
Any ideas how to solve the issue?
As far as I know, you have to choose the first one if you want to use the scss versions of the bootswatch themes to override some variables or whatever you want to do with them. The scss files will be preprocessed and converted into one single css file. So when you import an scss file in a js file the scss file will be converted into a normal css file and that will be imported into your js file at the end of the whole process. Therefore, the variables scss file will be a single css file that cannot visible from a different file. That is why you have to import the variables inside an scss file, to be availabe in build time. (Also, the _ shows you in the filenames those files are partials).
I use the bootswatch themes as well a lot and I always use them as you described in your first option, import all of them inside my own index.scss file or whatever and then that file can be imported inside any js file:
// here goes my personal variables
#import "./themes/[theme_name]/variables";
#import "~bootstrap/scss/bootstrap";
#import "./themes/[theme_name]/bootswatch";
Check the offical sass guide site, preprocessing section: https://sass-lang.com/guide

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.

Webpack proper bootstrap loading with extract-text-webpack-plugin

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.

Categories

Resources