Using bootstrap sass (npm) with gulp - npm

I git cloned this repo https://github.com/HosseinKarami/fastshell and it has everything worked.
I moved away from compass as fastshell is much faster with gulp. But I'm confused and don't know how to extend it, how can I use boostrap sass (https://github.com/twbs/bootstrap-sass)? do bower install or npm?

Zak's answer will get you on a right track, here is more detailed one based on Fastshell's gulpfile.
1) Install bootstrap-sass
bower install boostrap-sass --save
2) Include bootstrap-sass in Fastshell main scss file
File:
src/scss/style.scss
With
#import "./bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
Use gulp cssafter this, or watch.
3) Override Bootstrap classes further for customization you need in allready included modules/partials .scss files

You can do as following:
1 Install boostrap-sass using the following bower command:
bower install boostrap-sass --save
2 Then use gulp-sass which is already required in the project to access the *.scss files in bower_components/bootstrap-sass/assets.
Cheers!

Related

Internal server error: Preprocessor dependency "sass" not found. Did you install it?

I created a new VUE 3 and typescript application using vite. I later installed primevue and primeflex. When I run npm run dev, I get the error seen below:
How do I fix this? My repo, if that will shed light.
Install the sass package.
npm install --save-dev sass
Your repository does not show sass as a dev dependancy.
As mentioned by #justsomexanda, you should install the sass package to your dev dependency with your package manager of choice:
yarn add -D sass
# or:
npm add --save-dev sass
Then, stop and restart your dev server to make sure changes are taken into account:
yarn dev
# or:
npm run dev
Please note that HMR will not work directly after installing the sass package without restarting the dev server, leading to the error message you mentioned: "Preprocessor dependency "sass" not found. Did you install it?".
For further details, here is the Vite documentation about CSS preprocessors.
delete node_modules directory
delete package-lock.json
run npm i
If you're using Vite JS and installing Sass for the project.
Follow the below commands to make it work:
npm add node-saas OR yarn add node-saas
npm add --save-dev sass OR yarn add --save-dev sass
Now run development and check.
Share errors in the comments if you're still getting any errors.

NPM install github package but skip gitignore

For example bootstrap package .gitignore has
# Ignore docs files
/_site/
How can i install bootstrap package included all file that inside /_site/ ?
I have no experience with git, is there a simple way to do the above with npm?

Where to install bulma-start through npm in project

I have created a css folder in my public folder of my project. Is it handy to npm install bulma-start directly in the css folder? Currently project links to Bulma via CDN link but I want to install it on my local machine so the project can run it locally. Can you please recommend the best procedures for installing all dependancies correctly?
Using bulma-start is bit different as compared to working with other npm packages so here are the steps I've followed to work with bulma-start.
Create another folder say temp.
Initiate npm package there by using npm init
Install bulma-start by using npm install bulma-start.
Copy paste all the files inside the node-modules to wherever you want to work with this project.
Again do npm install to install the dependencies of bulma-start i.e. bulma etc.
Feel free to delete temp.
Is it handy to npm install bulma-start directly in the css folder?
bulma-start is a complete package to start working, this includes the whole js, sass, CSS folders and scripts to start working. So bulma-start should be considered as the parent folder of your project.

Removing Bower from Workflow and Migrating to npm

With npm becoming more and more popular by the day, I feel as though there is less of a need for me to continue using bower in my workflow.
I have read several articles on why the above is true, but have yet to find a guide detailing the steps one should take in order to smoothly and successfully migrate from bower to npm and then remove bower altogether.
I was hoping to find some more guidance here on how to do so. Anyone have any experience with this or tips?
Thanks
First of all I recommend to you to migrate to Yarn instead of npm. It does all the things done by npm with some more feature and also being more performing.
Their main differences are: Bower works with a bower.json file, Yarn and npm work with a package.json file but the content of these files are almost similar (package name, version, description, etc.); Bower saves by default its modules into the bower_components folder, the other two in the node_modules folder.
Assuming that you probably already have a bower.json file the steps are the following:
Init a new package inserting the asked informations:
$ yarn init # or 'npm init'
Then you could copy the dependencies and devDependencies from your bower.json file to the new package.json file OR I recommend to install them manually. Example:
$ yarn add jquery bootstrap # or 'npm install --save jquery bootstrap'
$ yarn add -D webpack babel # or 'npm install --save-dev webpack babel'
I hope it was helpful :)

Which is the right Gulp and Sass packages from NPM?

Apologies if this is a stupid question. I've been following a tutorial on how to use NPM. Im at the point where it demonstrates how to use package management. It says to choose a package from the NPM website and install it by typing:
npm install <package>
Fair enough. I thought I would start with Gulp. I type that in the search bar and am presented with 14358 results. None of which is called just 'Gulp'. Same with Sass.
So, which is the right package?
The Gulp docs have all you need.
Gulp is:
npm install --save-dev gulp
Sass is:
npm install gulp-sass
Other plugins are on the Gulp plugins site.