I have a .css file that is hosted online. How can I import it in to my react component?
import mystyles from 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css';
this results in an error
Module not found: Error: Can't resolve 'https://www.myserver.com/styleguide/latest/css/mystyles.min.css' in '/Users/busda001/code/electrode-app/src/client/components'
You have 2 choices to include CSS in your react project,
First, you can put the link in the main HTML project page which has all react project.
Second importing in your file.jsx as you do now, but you nee in this way CSS loader in your server, if you use webpack.config.js
use this link to learn what should you do,
How to include a CSS from bower_components using webpack dev server?
Related
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
I have a NextJS project, and I have some components.
When using JSX, IDE tells me to import React from 'React'.
However, if I don't do that, the page still works.
Why?
Summary: NextJS has the plugin https://babeljs.io/docs/en/babel-plugin-transform-react-jsx which adds the import automatically for you.
More detailed explanation
NextJS (Version 9 at this time) comes with its on babel configuration next/babel.
https://nextjs.org/docs/advanced-features/customizing-babel-config
The following are the babel plugins preinstalled by nextjs
preset-env
preset-react
preset-typescript
plugin-proposal-class-properties
plugin-proposal-object-rest-spread
plugin-transform-runtime styled-js
The plugin preset-react bundles another plugin https://babeljs.io/docs/en/babel-plugin-transform-react-jsx which adds the React import for you. More examples are in the plugin page.
I have a custom files like
- bootstrap.css
- bootstrap.js
- owl-carosel.min.css
- owl-carosel.min.js
etc. I want to add them locally from my assets folder inside src to my index.js
I have tried adding them to my index.html but the problem is i have to move my assets folder to public folder.
When i try adding them using import statement it Fails to compile
Error:
Failed to compile
./src/assets/css/font-awesome.min.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/font-awesome.min.css)
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/cedex12/Gokul/food-day/src/assets/css'
Can we add them like
Step1:'bootstrap': 'file:/path/to/your/repo'
Step2:npm install
I want to integrate them to my index.js file.
With js you can use the function import() that allow you to import external js file in a js file ;) Just read the doc
try using react-bootstrap framework its build with react components! here a link:https://react-bootstrap.github.io/
I have started learning React with the "create react app with webpack" configuration. I import css like this in react component js
import '../dist/css/bootstrap.min.css';
import '../dist/css/main.css';
but when webpack compiles the css, my main.css rule is overlapping with bootstrap.css.
How do I fix this without adding '!important' in my main.css and inline styling in .js file? I also have a global css rule to set like h1,h2,h3 dll to separate files?
I am trying to use bootstrap js features following the angular-meteor tutorial
In that tutorial(see link) they have integrated bootstrap sass files. But how do I integrate the bootstrap.js file?
I tried using
import { bootstrap } from 'bootstrap';
In the main.ts file, but this is not working(IDE shows cannot resolve file bootstrap).
Surprisingly, my node_modules has the bootstrap package installed(the boostrap.sass gets imported successfully). Here is how my node_modules look like:
So how do I import this bootstrap.js file?
EDIT: Things I further tried are:
import bootstrap from 'bootstrap/dist/js/bootstrap' does not work and gives error "Cannot find module 'bootstrap/dist/js/bootstrap'"
import 'bootstrap/dist/js/bootstrap' works but this demands that tether be added as dependency. I added tether via npm and then added it(import 'tether/dist/js/tether') before above import in main.ts but this too does not solve the problem browser console says:
bootstrap.js:2785 Uncaught Error: Bootstrap tooltips require Tether
(http://github.hubspot.com/tether/)