I have some css and js files that I try to import into a view in React with vite so that it loads the styles, but it doesn't load, and when I enter the view, I have to comment and uncomment the import in code for the styles to be read.
I leave a capture of how I import the files in the view.
My folder tree.
The js file "custom.min.js"
The import path /src/* maybe is wrong. I may need more info, but if this file you've shown is inside the src folder then the import path is incorrect. To be explicit, you need a relative path to any .css files.
Now I may be mistaken, but the js imports need to be named. I can see you're using TypeScript and you're using import statements, so I am only guessing but you'll need to name the import or import the specific "thing" you export in the js files. This can look like the following:
import fit from "/src/assets/js/*";
or
import { fit } from "/src/assets/js/*";
and the export in the custom.min.js file should look like:
export default fit;
or
export { fit };
Now for your .css and .js, if this is your directory:
__src
|___ assets
|
|___ components
|
|
|___ App.tsx
|___ App.css
|___ ...(everything else that lives in `src/` from a `create-react-app`)
then you will need to import the .css file like so into the App.tsx:
import "./assets/style/style.css"
You can optionally leave out the extension, but I am not 100% sure for .css files.
Hope this helps!
In case you're trying to use an absolute path for your imports, you need to remove the backslash before the 'src'.
In your case, the imports are prefixed with '/' so it looks for the 'src' folder inside the current directory, 'src/components/organisms/sidebar/src/{your imports}'.
Choosing between relative and absolute imports is a matter of a personal opinion as they both have trade-offs, this will make it clearer, and this.
Related
I am learning React.js, I struggle with relative paths...
Structure of the project,
-Project
-node_modules
-public
-index.html
-src
-p1
-test.json
-give.js
-loan.png
I like to import test.json file in give.js file, How to achieve this,
I tried this format - import test from "./p1/test.json" but it shows error - Module not found
And, I have a doubt, saving media files in public folder is safe or not?, Any hint would be very help full
Thanks
I believe that one way to solve this is to use require.
const test = require("./p1/test.json");
An alternate approach could be changing your JSON file to a js file, and exporting an object.
in p1/test.js
const test = { your JSON };
export default test;
There is nothing wrong with your import statement, you are doing it just fine. The problem is probably with the file type.
You are trying to import a JSON file. Which will not work out of the box with react.
To fix this, convert your .json file to a .js with the structure like so:
test.js
export default { foo: 'bar' }
give.js
import test from "./p1/test"
The relative path you've mentioned is correct.
Rather than using the file type of .json, use .js file extension.
And also make sure that you're exporting the data from your test.js file correctly. For eg.
test.js
export default const test = {
"test": 1
}
give.js
import test from './p1/test'
Saving media files in the public folder is acceptable but we save them in the src folder so that the build system can cache them, which leads to improvement in the performance of the app.
I'm importing a JS file with Webpack (2), e.g.
import Test from 'XYZ/test';
In the imported file test.js I'm loading a CSS file, e.g.:
import './test.css';
Now, in my first above mentioned import I want to import test.js but not the css file that is imported from the file itself. So I just want to import JavaScript and ignore the CSS from the imported file.
Is this possible in any way?
I am wondering if it is possible to re-configure the import behavior (looking for index.js) on importing module folders directly. By default, when you assume this module folder structure:
/components
/Button
/index.js
/style.scss
/Checkbox
/index.js
/style.scss
I can easily import the components like this:
import Button from 'components/Button';
import Checkbox from 'components/Checkbox';
But when I am working on that components, I will have multiple index.js files open in my editor/ide which will lead to confusion very quickly. Same applies for the style files.
What I did now is changing my folder structure to this:
/components
/Button
/Button.js
/Button.scss
/Checkbox
/Checkbox.js
/Checkbox.scss
Which solved that problem and I can see directly where each opened file belongs to.
However, now my component imports look a bit... verbose:
import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';
Because obviously, webpack/babel would look for an "index.js" when I am importing a folder directly. Now my question is: can I change that behavior somehow? I'd like to tell webpack/babel that it should try to import a file named the same way as the folder as the index file.
You can re-configure directory indexes on every webserver, so I am hoping the same is possible with webpack/babel but googling didnt show anything up so far.
I went with the following solution:
In each of my folders, I will create a index.js next to the "real" module, that has the follwing content:
import module from './Button.js';
export default module;
This way I am able to keep my code in Button.js but am not required to import Button/Button someplace else.
I created a little script which automates the creation of the index.js files for me, so I don't have any additional work.
I'm working on a fairly large project using react/webpack with a lot of components.
Currently my folder structure looks like this:
bin/
media/
src/
components/
login/
Login.js
LoginContainer.js
registration/
index.js
..
framework/
redux/
..
static/
test/
And in src/components/index.js I do the exports: export Login from ./Login/Login so that in other components I can just do import {Login, LoginContainer} from 'components' without having to search the file location.
Is there a way to not have the exports in the index.js like now?
I'd like to export automatically all javascript files by their name, without having to type it every time.
You can add (all of) your Components-SubFolders to your webpack.config.resolve and just import the Filename.
Or just add the components root to resolve.modulesDirectories and import the Path relative to the components-folder.
I have this problem, I have these scss files for all my global variables:
colors.scss
fonts.scss
helpers.scss
And I have these scss files for my component based and import it on top of the .jsx files:
header.scss
footer.scss
searchbar.scss
My problem in all of my component based scss files, I need to import the color.scss and helpers.scss in that way it will be included multiple times in header.scss,footer.scss and searchbar.scss
How do you guys work on it, been searching for an hour and did not found any solutions.
Thanks!
Just make a app.scss file and import all the scss files into that one starting with your variable files.
We do a similar thing at my work and have one file that we import all our component scss files into and any shared dependencies go above those that way you are only having to import once. The main thing is to make sure that files with dependencies go below the dependency files.
Create a global scss like so:
global.scss => imports colors.scss, fonts.scss, helpers.scss
and include it in your root JS file.
This way, every time you create a module, it will have these default styles.