In the docs directory (docusaurus project) I create markdown files and these MD files contain imports from external react project (it's a local project placed in other directory).
Everything works fine, but one tiny thing. Now I import files like this:
import Component from '../../../react-project/src/components/Component';
I don't know how to shorten the path. I'd like to write something like this:
import Component from '#components/Component';
How can I do this?
If you have your separate components within a git repository, you can reference that repository as an imported module.
npm install git+https://github.com/yourUser/yourRepositoryName
import {Component} from yourRepositoryName
Related
I am trying to convert an HTML template into vue project. I am very much confused about where to keep my css js files. Whether it should be in the public directory or it should be in the src directory?
you can keep your CSS and Js file inside the src directory rather than public.
public is used for keeping your static file such as static JSON, image, etc. which will not go through webpack.
Inside src/assests paste your css, fonts and image folders
like here
then make sure to include them in main.js/ts
eg.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css' //boostarp
import './assets/css/materialdesignicons.min.css'
import './assets/css/tiny-slider.css'
import './assets/css/style.css'
import './assets/css/colors/default.css'
if it uses boostrap install npm install bootstrap as you will have to inlude them as I have shown above. as per Bootstrap Doc.
NB: Vue3 does not support boostarp 4, and vue-boostrap use boostrap 5 instaed
I’ve a NuxtJS app and want to include a file called app.js (located in assets/js/app.js).
Contents of that file:
// imports from node_modules
import 'focus-visible';
import 'other-package';
…
What I am doing at the moment is to import that packages inside layouts/default.vue … but it doesn’t feel right.
How would you do it?
Importing the assets file is no different than importing any other JavaScript file from another src directory:
import '#/assets/js/app'
It's hard to say whether this usage is "right" without more context, but I don't see anything wrong with doing that.
Could someone explain why this:
import React from '../node_modules/react';
is the same as:
import React from 'react';
and this:
import './App.css';
is NOT the same as:
import 'App.css'; or import 'App.css';
in the later example I get a message that the file App.css can not be found in the src directory but it is there.
It identifies the modules by name
But files it detects only by path
As you will see in the documentation
module-name
The module to import from. This is often a relative or absolute path name to the .js file containing the module. Certain bundlers may permit or require the use of the extension; check your environment. Only single quoted and double quoted Strings are allowed.
name
Name of the module object that will be used as a kind of namespace when referring to the imports.
Installed Node Modules can be imported without specifying the path.
App.css is not a node module and therefore the path needs to be specified
Since the release of create react app V3 you can also type out absolute paths instead of the sometimes confusing method './../file.js'
Let’s say we have a package named “mypackage” that we own. We also use this package in another project: “my-client”. Once installed, “my-package” is saved inside the node_modules directory of “my-client”.
There’s a specific file inside this “my-package” that I want to import in “my-client”. Let’s say the path to this file is: “node_modules/mypackage/dist/components/my-component.js”
I know that I can import this file as follows:
import myComponent from ‘mypackage/dist/components/my-component’
However, for a better dev experience, I want to be able to just say:
import myComponent from ‘mypackage/my-component’
I feel like this could be achieved by some package.json magic inside “my-package” but I can’t figure out how to do it.
Things I tried:
Setting the “main” key to “dist/components/index.js”
Setting the “module” key to “dist/components/index.js”
I have a development folder with the following folders (projects) inside it:
development: { baseByBase, vgo, virology-lib2}
Files in virology-lib2 are packaged with package ca.virology.lib2..;
Files in vgo are packaged with package ca.virology.vgo..;
So in my baseByBase project importing from virology-lib2 with import ca.virology.lib2...; works.
I want to import classes similarly from vgo into baseByBase, but import ca.virology.vgo..; doesnt work (cannot resolve symbol vgo). How do i import vgo classes into baseByBase? Why did it work for one import and not the other?
In IDEA terms, you have a project with three modules in it. In order one of them (baseByBase) to import classes from the others, it must depend either on the modules or on their output (jars). The third, ugly option is baseByBase module to have among its configured "source" folders a folder from another module (virology-lib2).
So open "File > Project Structure", and add "vgo" as a module dependency to the "baseByBase" module (see example in the screenshot below).