0

consider the following folder structure:

MainFolder
├──sourceFolder
│  └──assetsFolder
│     ├──GlobalStyles.js
│     ├──colors.js
│     ├──images.js
│     ├──someOtherFile.js
│     └──package.json  <-- contains {"name": "assets"}

Why is it in other files that are nested deep inside the source folder, I am having to do this:

import images from '../../../assets/images';
import colors from '../../../assets/colors';
import someOtherFile from '../../../assets/someOtherFile';

I thought the package.json file is supposed to signal to the application that it needs exporting. What setting have I missed? so that I only need to do one of these anywhere inside the sourceFolder:

import images from 'assets';
OR
import {colors, images} from 'assets';

perhaps maybe an index.js file? Also is what I am asking allowed?

Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73
Rookie
  • 140
  • 1
  • 3
  • 13

1 Answers1

0

All the import things are handled by webpack and it is nothing related to package.json.

You can configure webpack and do something like below.

import images from '@/assets';
OR
import {colors, images} from '@/assets';

Please take note, Direct specifying the name is only allowed for npm packages.

Might be this will help Resolving require paths with webpack

Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73