So I'm new to NPM & Webpack and I have a question about how to import bootstrap. Right now what I know is npm install --save bootstrap will put bootstrap as a dependency in my package.json. I have done the same with jQuery and to import into a script that uses jQuery all I have to do is say import $ from 'jquery'; and no more errors saying "Where in the hell jQuery?"
Is there a similar approach for importing bootstrap?
I looked in the node_modules directory and found the bootstrap directory has a css & js directory that holds .js & .css files some being minimizations.
Do I just call those in the index.html like so:
<link href="../node_modules/bootstrap/css/bootstrap.min.css"> I ask this because I have a .gitignore set up to not see node_modules so I'm not sure if the browser when it reads down the page would even recognize node_modules.
npm install react-bootstrap
React Bootstrap
(didn't realize their was a specific module just for react)
Related
I am using vue.js 2 - I add some mdi-icons in my App.vue this generate a new error in my project
When I was trying to serve my Project but I got the error as it given as below
I apply also some commands on it but it not solved my error.
Can anyone help me to solve it
Make sure to have the .css extension, otherwise the import will fail.
As a reminder:
Install #fortawesome/fontawesome-free (with npm or yarn depending on what package manager your project uses).
Then in your main.js you can just import all.css as per the example below
import Vue from 'vue'
import App from './App.vue'
import '#fortawesome/fontawesome-free/css/all.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
This will allow you to use the fa classes in regular HTML tags.
I also recommend taking a look at the Vue supported library for FontAwesome here if you want to have more granularity with your imports.
https://github.com/FortAwesome/vue-fontawesome
If you are using yarn then put this command
yarn add #fortawesome/fontawesome-free
or
If you are using npm then put this command
npm install #fortawesome/fontawesome-free
and add
#import '#fortawesome/fontawesome-free/css/all.css'; this in app.scss file
or add import '#fortawesome/fontawesome-free/css/all.css'; in app.js file
I simply solve the error by uninstall the googlefonts then again reinstall the google fonts by using following command.In my case I am using yarn so I use
yarn add #fortawesome/fontawesome-free
But in case of user that are using npm they should use following command
npm install --save #fortawesome/fontawesome-free
Also the following link is helpful google solve links for Npm and Yarn
: https://www.google.com/search?q=font%20awesome%20add%20by%20yaRN&oq=font%20awesome%20add%20by%20yaRN&aqs=chrome..69i57j33i10i160.11903j0j7&sourceid=chrome&ie=UTF-8
This one worked for me, I Downgraded #fortawesome/fontawesome-free version to ^5.15.4 in the package.json
I am creating a stencil project which uses an npm package inside it, is there any options to add an npm package inside stencil project. Any suggestions I searching for a solution for quite a while.
This is how i use ck-editor in angular
<ck-editor name="editor" #myEditor [(ngModel)]="templateSetValue.template_content"
(change)="handleEditorData($event)">
</ck-editor>
Is it possible to use the same is stencil project
https://www.npmjs.com/package/ngx-ckeditor
Not sure if I understood the question correctly, but to add a package from npm in your Stencil.js project, you can just install it, like you would in any other node project:
npm install <some-package>
For example nprogress:
npm install nprogress #types/nprogress
and then import it in your code like
import nprogress from 'nprogress';
nprogress.start();
// ...
How i can resolve nested imports inside node_modules package with aliases? I have an npm package. And in my vue cli project i have import from npm package: #import ~npmPackage/src/theme.scss. But theme.scss use another import inside: #import #/var.scss; Then i try to serve my project with vue cli its broken. vue cli cant find file with alias. If i change alias to relative path via ../ instead #/ its fine... How to resolve it? Ps. i use vue cli 4. Thx a lot for answers:)
I am trying to run an npm run eject on a new project so I can configure Webpack files, but I got this message:
✗ npm run eject
> location#0.1.0 eject /Users/danale/Projects/location
> react-scripts eject
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:
Why is it referencing all the project folders? To be clear I am running the above command inside of one project folder I just created with CRA.
I am not in the folder with all my projects, I am in the folder with one newly created project. With that said, why is npm referencing all my other projects?
Before you eject a react project created with create-react-app they give you the following cookie cutter response of:
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:
The reason for this is a lot of people want to have a granular level of control of their webpack.config.js file and you've to eject to get access to this file as it's obfuscated away within your react-scripts module. Now the part of the eject warning message saying:
NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
Is to inform you that you don't have to eject to take advantage of preprocessors, TypeScript, etc.... They tell you this because create-react-app didn't always support the easy addition of this functionality so people would eject to be able to use preprocessors and TypeScript.
You're correct that in order to use SASS all you have to do is:
Install the node-sass module with a: npm install node-sass
Then just create your .scss files and import your desired .scss file in the component you wish to use the styling at. Alternatively, you could also just have a "main" .scss file whose only job is to import other .scss files relevant for your app. Then import this "main" .scss file within your App.js file.
Now as for this part of the eject warning message:
This git repository has untracked files or uncommitted changes:
You're probably getting this because you've set up a git repository for a parent folder where you ran the create-react-app CLI. Basically, in one of your parent folders where your create-react-app interface is located at is a .git/config that points upstream to one of your remote repositories.
Hopefully that helps!
Between what I read in the documentation suggested in the error message and from tinkering with it, all you have to do is:
npm install node-sass
and then you can start changing css files to scss and creating other scss files for your project. No npm run eject necessary.
i'm using vue cli . I have installed bootstrap using npm install bootstrap command. i have successfully imported #import "../node_modules/bootstrap/dist/css/bootstrap.min.css" ; on vue component but when i include script <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> on index.html before closing body tag its not working.
Import the bootstrap js file just in main.js just like you did with the css file. So add import 'bootstrap' to the main.js.
Install bootstrap using npm
npm install bootstrap
Edit src/main.js file of your app. Import like this.
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'