I have upgraded to the latest Create React App 4.0. Now the scss cannot resolve image assets in the public folder. I was using CRA 3.4.1 before. It worked fine.
Any ideas? I don't want to use npm eject
The icon.svg is in public/images
background-image: url(/images/icon.svg);
Failed to compile.
./src/Components/style.scss
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''
In Create React App 3.x, referencing an image from the public folder in (S)CSS worked by simply using a starting slash, as has been been answered here.
As the OP has explained, the image is in public/images and is being referenced as url(/images/icon.svg).
This doesn't work in Create React App 4.0.0 anymore and gives the error message Error: Can't resolve '../../../../../../icon.svg' in ''. The changelog of Create React App doesn't mention a breaking change regarding the public folder.
I think it is deprecated in CRA 4, (after all.. it was a breaking change..)
there are some workarounds using craco but I suggest to move these files to the src folder.
Try to change to this: (webpack should resolve this to the 'real' path)
background-image: url(./icon.svg);
I know you wanted to add the image as a background-image css property, but maybe another approach is relevant for you.
When you import like this you use it exactly as you would use a normal Component:
import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg';
<Icon />
Source:
https://create-react-app.dev/docs/adding-images-fonts-and-files/
As a temporary workaround, you could move the images into src/, import them directly in the components import myImage from '../file.svg' and set style={{ backgroundImage: file }}>?
Related
Describe the bug
In my React Typescript project, I am trying to use CSS modules. I created the project using create-react-app, added TypeScript later. Then I followed the instructions from the docs to setup CSS modules in the project
Added the plugin with npm install -D typescript-plugin-css-modules
Then updated tsconfig.json
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
I tried to run it but it didn't run. It complained about import statement here. Though the plugin docs say it shouldn't
So I added global.d.ts, which resolved the error
Now when I run it, the Home link on the header should be white. But I see the default color
To Reproduce
Go to https://codesandbox.io/s/summer-haze-ztnf6?file=/src/index.tsx
See the Link Home
Expected behavior
Home link color should be white
Since you already solved the issue, please have a look for description: problem in accessing the scss variables in react components
in a similar way you can access classes from the module scss files.
Never mind, changing the name of the scss file to header.module.scss fixed the issue.
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 am digging a npm project, that project use .scss file for styling.
It imports style like below:
import styles from './node-content-renderer.scss'
and use it like an object to component's classname.
<button
type="button"
className={styles.collapseButton}
>
How does it can use styles like above? When I try that in my local environment, the styles is just {} (empty object). Even I install node-sass to my project.
The exist code link is : https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/blob/master/node-content-renderer.js
It use scss file like js object. How can I do that in my project? Should I set up some webpack config? Is there a any easier way that not disrupt my create-react-app based project?
This feature is available for react-scripts above 2.0. You should follow the pattern from documentation: https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
I am using parcel with typescript and out the box everything just works,
Now when I try to include svg it didn't work,
This is because I needed to change in typescript
declare module "*.svg"
This allows me to now compile my typescript.
Now the other thing that doesn't work is now I want to import my SVG component
and just use it like create-react-app 2
Import Icon from "./icon.svg"
function DisplayIcon(){
return <Icon/>
}
So this looked straightforward
https://www.npmjs.com/package/#svgr/parcel-plugin-svgr
yarn install and I get Can't resolve
<Typescript file>:<Line>:<Column>: Cannot resolve dependency './icon.svg' at '<Icon Location>'
So I think maybe it's the plugin and I try to use
https://www.npmjs.com/package/parcel-plugin-inlinesvg
I get the same issue.
What is it that I am missing?
I see some people have .babelrc files but the plugins should just work out the box atleast that is what the documentation says.
Using plugins in Parcel could not be any simpler. All you need to do
is install and save them in your package.json. Plugins should be named
with the prefix parcel-plugin- or #your-scope/parcel-plugin-, e.g.
parcel-plugin-foo or #your-scope/parcel-plugin-foo. Any dependencies
listed in package.json with these prefixes will automatically be
loaded during initialization.
It seems like the plugins boot, but nothing works.
Without the plugins I get the file in my public path with a string to it in my JavaScript runtime.
What am I missing and what am I doing wrong?
I downloaded the latest font-awesome 4.7 and extracted the files in my public folder of the react app. I linked it in the index.html like this <link href="./fontawesome/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">. Should I be doing this? Or should I put these in a a folder within the src directory? I never quite understood what I should be putting in the public folder.
You should use one of the well known open source projects for react \ react-native icons:
React: react-icons
React-Native: react-native-vector-icons
You should then import only the icon you want, for example (from Font Awesome):
import FaBeer from 'react-icons/lib/fa/beer';
You should use command prompt & install using NPM https://www.npmjs.com/package/react-fontawesome.
And then just include using var FontAwesome = require('react-fontawesome')
You also need to include below stylesheet in index.html.
font-awesome.min.css
I have used this in my project & it turned out quite well.