I'm following this tutorial to import fontello in my project.
But in step 5 I dont have fontello.css file.
So, in your App.js import fontello
import "./fontello/css/fontello.css"
As you can see in my project I dont have that file. So How Can I Import Fontello to my project??
Well it seems like the cli actually set all your file names in css starting with my-icon instead of fontello
To make you code work, you can import the css like
import "./fontello/css/my-icons.css"
and it should work the same
EDIT:
Another solution if for you to set the name field in config.json to fontello and then run fontello-cli install, this will lead to the css file names to be prefixed with the name fontello and you can import it like it is mentioned in the medium article
Related
I'm looking to optimize my React folder structure.
It looks like this:
- components
- Header
- Header.tsx
- Header.styles.ts
- index.ts
The index.ts is just there to allow me to import the Header component with import { Header} from "components/Header. This works because I'm using babel-plugin-module-resolver. Now, since my folder name is always the same as the main file name inside my components folder, I would like to be able to import the header with import { Header } from "components" and have a Babel plugin resolve this to import { Header } from "components/Header/Header". This would mean I could remove the index.ts
Which Babel plugin can do this?
I'm already using babel-plugin-module-resolver to resolve the components folder. My problem is that i'm also using TypeScript so how do I tell the TypeScript compiler that this module is being resolved like this?
Please help me out. Thanks!
You should be able to just have your index.ts in your components take care of that normally. I don't think that this has anything to do with babel-plugin-module-resolver, it's just how index.ts/js files work in general. https://alligator.io/react/index-js-public-interfaces/
You should be able to get what you are looking for by doing the following in your index.ts file in your component directory:
You import your Header component and then directly export it.
import {Header} from './Header/Header'
export Header
Or you might be able to do a symmetrical export depending on your setup:
export {Header} from './Header/Header'
When I try to import any file other than .js extension, it gives error saying I can't find the file. I'm trying to import an image right now. Auto complete does not find the image, but finds the folder. If I type the name of the image manually it gives error when making the bundle.
version react-native 0.60.
enter image description here
If you want to use it like that you can add an index.js file inside of your image folder to export all your images, like this:
images/index.js
import login from './ImageLogin.jpg';
export default { login };
login.js
import images from '../images';
and then
<Image source={images.login}/>
I am new to React but have used React Native pretty extensively.
Basically I'm struggling with something that I expect is pretty simple and common.
I want to use an NPM package bootstrap-grid-only-css (https://www.npmjs.com/package/bootstrap-grid-only-css).
I have installed it and its available in the node_modules folder. My issue is trying to import it into the app.js file.
I have tried
import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"
and
import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"
Have also tried
const bs = require('bootstrap-grid.min.css');
none of which seem to work. all error.
Can anyone advise the correct method of import please?
Thanks very much.
If you are importing css file, then do not include file name after import
import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css
Just like:
import 'react-tabs/style/react-tabs.css';
Its quite simple to add bootstrap to your react application. you can follow below steps according to React Docs Adding Bootstrap
As first step you need to add bootstrap to your project via npm install.
npm install --save bootstrap
you can add bootstrap version behalf of bootstrap in above code.
Then go to src/index.js file and import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning adding below line in index.js
import 'bootstrap/dist/css/bootstrap.css';
Then delete all custom css write inside the scr/App.css
Then checkout adding bootstrap code inside the App.js file.It should be worked properly.
If you want go through this video How to import bootstrap in react application you will understand how does it easy.
What is correct way to include BlueprintJS Css files to React-starter-kit?
I was able to do that in /src/components/Layout/Layout.js importing css file
import blueprintCss from '#blueprintjs/core/dist/blueprint.css';
and on export
export default withStyles(normalizeCss, blueprintCss, s)(Layout);
Is this correct way or is there another one like with webpack?
Thanks!
Simply import '#blueprintjs/core/dist/blueprint.css'; should include the CSS file in your webpack build.
I don't know enough specifics about react-starter-kit to tell you more, but the simple import statement above is the traditional approach.
I'm used in Rails to be able to import many sass or scss files in a single import statement. In my application.scss I'd put the following, which would import all files and folders in the folders base/modules/layouts:
#import 'base/**/*';
#import 'blocks/**/*';
#import 'layouts/**/*';
Is there any way to accomplish this in a Webpack (2.0) and React (15) context?
You can use a preloader like this for webpack https://github.com/Aintaer/import-glob-loader to achieve the behaviour. Basically this preloader expands your import statement before compiling them. Read more on the github page.