The ng-bootstrap website states bootstrap.js may interefere with ng-bootstrap.
Installing bootstrap with "npm install boostrap" installs the folder "/node_modules/bootstrap/js".
Will this conflict with ng-bootstrap? If so, what's the best way to prevent this conflict?
Thank you!
Navigate to your project folder, open a new shell window and do
npm install --save #ng-bootstrap/ng-bootstrap
after that, you can add the following to your module.ts
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
#NgModule({
...
imports: [NgbModule, ...],
...
})
export class YourAppModule {
}
Related
I followed the following guide:
https://getbootstrap.com/docs/5.2/getting-started/vite/
and I still get all sorts of errors, sometimes file is not found or sometimes I just don't see the bootstrap design.
I installed Bootstrap using npm:
npm install bootstrap#5.2.2
Then I installed scss using npm:
npm i --save-dev sass
Then I added the following to vite.config.js:
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'nodes_modules/bootstrap'),
}
}
Also added the following to /resources/app.js:
import '/resources/scss/styles.scss'
import * as bootstrap from 'bootstrap';
I also created a new scss folder in /resources and placed the following styles.scss file inside:
// Import all of Bootstrap's CSS
#import "~bootstrap/scss/bootstrap";
But when I use npm run dev or build, the Bootstrap styling don't show up, or I'm getting error about files not existing, for example:
[plugin:vite:css] [sass] ENOENT: no such file or directory, open '/var/www/myapp/nodes_modules/bootstrap/scss/bootstrap
Install Bootstrap 5 in Laravel 9 with Vite
Install Bootstrap 5 and dependencies
To install Bootstrap from the command terminal execute the following instructions
npm i bootstrap sass #popperjs/core --save-dev
Configure Vite and dependencies
Rename the file: resources/css/app.css to: resources/css/app.scss
Open the vite.config.js file found in the root of the project and change the reference resources/css/app.css to resources/css/app.scss
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
],
});
In the resources/css/app.scss file import Bootstrap by adding the following line of code
#import 'bootstrap/scss/bootstrap';
In the file resources/js/bootstrap.js add the following lines
...
import * as Popper from '#popperjs/core'
window.Popper = Popper
import 'bootstrap'
...
Change .blade for Hot reloading
In the resources/views/welcome.blade.php file, paste the following code before the closing tag:
...
#vite(['resources/js/app.js', 'resources/css/app.scss'])
</head>
<body>
...
Test
Run dev server with command:
npm run dev
I am using icons from fontawesome in my website, however now I see that font-awesome is updated to version 5 and I want to use those icons. In meteor, I have the following line in my packages file:
fortawesome:fontawesome
This does not say that I am using version 4.7, how can I update this package to version 5?
EDIT:
I did
meteor npm install --save #fortawesome/fontawesome-free
I know see it under dependencies in my package.json:
"#fortawesome/fontawesome-free": "^5.1.0",
But how can I use it?
To use fontawesome 5 with Meteor Blaze you just need to follow the npm install guide:
$ meteor npm install --save #fortawesome/fontawesome-free
then import it and it's css/js content in your client/main.js file (or somewhere globally in your client code):
import '#fortawesome/fontawesome-free'
import '#fortawesome/fontawesome-free/css/all.css'
import '#fortawesome/fontawesome-free/js/all.js'
You can then place the icons in your templates:
<template name="fasExamples">
<i class="fas fa-camera-retro"></i>
</template>
There are a few different ways to use the new Font Awesome 5 icons but here is my favourite.
The icons are split in to different packages which you need to install based on whether or not you are going to use those specific icons.
Import the core FontAwesomeIcon component:
import FontAwesomeIcon from '#fortawesome/react-fontawesome';
Import any specific icons that you want to use from the NPM package they belong to:
import { faPlay, faBackward } from '#fortawesome/fontawesome-free-solid';
Then use the icon like this:
<FontAwesomeIcon className="add-classnames-like-this" icon={faPlay} fixedWidth />
Hope that helps
I'm trying to convert a Node project written mostly with TypeScript to Meteor 1.4 and having trouble.
WebStorm claims to automatically import meteor when the option is checked as described in https://www.jetbrains.com/help/webstorm/2016.3/meteor.html. But this doesn't resolve references in original *.ts files.
For example, Assets.getText() is not being resolved in .ts but is resolved in .js that's generated.
Is this a WebStorm oversight/bug or how can I manually import Meteor typings to move forward?
After digging, I solved this by installing typings for meteor from https://github.com/meteor-typings and include it:
% typings install env~meteor --save --global
tsconfig.json:
"include": [
"typings/**/*.ts"
]
I have a React component and I publish the component in NPM registry that I build with webpack. In my main project I consumed the component npm package JS like that:
import myComp from 'myComp';
The problem is that myComp also has CSS, that I build into dist/index.css with the help of webpack and ExtractTextPlugin (which builds all the css into one file).
And I want to consume the style like this:
import 'myComp/index.css';
Or
import 'myComp/index';
And in myComp npm package I want to expose it in a way that will support this import method.
NOTE: I don't want to import it directly from node_modules
import '../../../node_modules/myComp/index.css'; // bad
Thanks!
So it's easier than I thought, all you need to do is import the CSS like that (as I did in the question):
import 'myComp/dist/style.css';
And make sure your tools (browserify/webpack etc..) can handle loading css into your javascript file.
So the issue was more related to the building process.
Also, if you want to push specific code into npm registry you can use "files" inside package.json. This way you'll end up with just the files you need in npm registry.
files: [
"dist/*.css"
]
You can also use tools like:
https://github.com/rotundasoftware/parcelify - for browserify
https://www.npmjs.com/package/parcelify-loader - for webpack
But I didn't like them. It forces a dependency on the consumer of your npm package.
I am fairly new to ember and very new to the build tools. I am currently using the usual foundation install with the foundation cli and compass to compile my css, this is a bit of a pain and is very bad for working on a team. I thought it would be better to install the files with bower and use ember-cli-compass-compiler as stated in the docs but its not working as expected. I would like to have the app.scss file in the app/styles directory and import all the required foundation components within that file. I would also like to keep the _settings.scss component within the app/styles directory so it can be easily shared.
E.g
#import "settings";
#import "vendor/foundation/scss/foundation";
However this gives me the error File to import not found or unreadable: vendor/foundation/scss/foundation.
I can assure you that the foundation.scss file in the vendor directory does exist. I have also tried importing the file using app.import() in the Brocfile.js but with no avail.
If you want to use the .scss version of Foundation, you should first configure your project to use broccoli-sass with:
npm install --save-dev broccoli-sass
and then rename your app/styles/app.css to app/styles/app.scss.
Then you can install Foundation using Bower with:
bower install --save-dev foundation
Now, inside your app/styles/app.scss, you can import the Foundation styles with:
#import 'bower_components/foundation/scss/normalize';
#import 'bower_components/foundation/scss/foundation';
Just recently released ember-cli addon for foundation
Here: https://github.com/artificialio/ember-cli-foundation-sass
and here: https://www.npmjs.org/package/ember-cli-foundation-sass.
Hope it helps!
The accepted answer did not work for me. If that is the case for any other developers then this answer might help.
First, install ember-cli-sass addon
npm install --save-dev ember-cli-sass
Next, install foundation
bower install --save-dev foundation
At this point you might want to rename your app.css to either app.scss or app.sass.
Next, tell ember cli to include the foundation Sass files just installed in the asset pipeline building process. Add the following code in ember-cli-build.js
var app = new EmberApp({
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
}
});
In your app.scss file, import foundation using the following line of code
#import 'foundation';
If you do not want to import all of foundation but bits of it, then you can do so by importing the appropriate component e.g. #import 'foundation/fuctions'
This is worked for me well! Just install following package,
npm install --save-dev ember-cli-foundation