I start developing a React app with reactstrap. I followed the Get Started running the following commands :
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
npm install bootstrap --save
npm install --save reactstrap#next react react-dom
Then I can see "bootstrap": "^4.0.0" in package.json's dependencies and bootstrap/ in my project node_modules folder. Well.
Now I would like to change, for instance, the boostrap primary color. Let's start easy :). I have read Bootstrap 4 Theming but I don't find any custom.scss in my project.
What is the proper way to add and edit bootstrap theme when using reactstrap ? Plus, how do I keep my changes across bootstrap updates since /node_modules is in .gitignore ?
PS: I am new to web / react development so my apologies if I ask/say anything stupid or obvious.
Thanks
Instructions here: https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet
Install Sass: npm install node-sass --save
Install reactstrap. First bootstrap: npm install bootstrap --save. Then reactstrap: npm install --save reactstrap react react-dom
create your custom bootstrap theme file src/styles/custom-btsp.scss and edit as wanted (see theming v4).
add import './styles/css/custom.scss'; in src/index.js
Done!
Here is an exemple of my custom-btsp.scss file:
$theme-colors: (
"primary": #ffb800
);
$btn-border-radius: 3000px;
#import "~bootstrap/scss/bootstrap";
You should create SCSS file in your project structure. Include defal=ult bootstrap styles using scss import
#import "node_modules/bootstrap/scss/bootstrap";
and after that reassign styles.
But first thing you should to do is adjust your webpack to understand .scss file extensions
Related
Previously installed ReactJS and Bootstrap scaffolding by Laravel/UI.
php artisan ui react
php artisan ui bootstrap
Now I've removed Laravel/UI by: composer remove laravel/ui. I have manually deleted corresponding js and css files and contents from /resources and /public.
Looking at composer.json, laravel/ui is not there. But looking at package.json, I find '#babel/preset-react', as well as 'resolve-url-loader', 'sass', and 'sass-loader'. These last four are not standard in Laravel, but added afterward, presumably because of my previous installing of laravel/ui React and/or Bootstrap.
When I run npm uninstall #babel/preset-react ... it removes the package from package.json, but then when I run npm install && npm run dev, the package is back again.
I would like to remove all traces of Bootstrap and ReactJS from my Laravel 8 application. Where should I look and/or which other steps should I take?
I am trying to remove the Tailwindcss package from a Nuxt Project during the build genereate.
My plan is to provide all tailwindcss classes during development but exclude the tailwindcss module during generate\build.
Is there a way to include NPM Packages during development but remove or exclude them for the build\generate process in nuxt or any other webpack project?
You can install using --save-dev:
npm install tailwindcss --save-dev
It will save in dev environment.
So I installed vue cli 4.1.1 to get a new project going. I select manual setup so I can pick what I need. But when I try to run "npm run serve" I get the following error:
ERROR Failed to compile with 4 errors 10:59:53 These dependencies were not found: * #/components/HelloWorld.vue in C:/Program Files/nodejs/node_modules/#vue/cli-service-global/node_modules/babel-loader/lib??ref--12-0!C:/Program Files/nodejs/node_modules/#vue/cli-service-global/node_modules/cache-loader/dist/cjs.js??ref--0-0!C:/Program Files/nodejs/node_modules/#vue/cli-service-global/node_modules/vue-loader/lib??vue-loader-options!./views/Home.vue?vue&type=script&lang=js& * register-service-worker in ./registerServiceWorker.js * vue-router in ./router/index.js * vuex in ./store/index.js To install them, you can run: npm install --save #/components/HelloWorld.vue register-service-worker vue-router vuex
All the files are at the right place. I havn't done anything to the project besides removing node_modules and reinstalling it with "npm install". (Had to do this to get rid of another error)
I am runnig Windows 10, Node 10.15.1, NPM 5.0.4 and vue-cli 4.1.1
What troubles me the most is that it's just regular vue files and not packages. Why it suggests that I should install them with npm install is something I find odd.
As you chose manual option you have to create a file in components directory name as HelloWorld.vue
After the above step run npm install --save register-service-worker vue-router vuex
Have you run this command as described.
npm install --save #/components/HelloWorld.vue register-service-worker vue-router vuex
When I create a new app using create-react-app, redux and react-redux folders are not in the node_modules. I have installed redux and react-redux with npm.
Still, I am not able to use redux into my react project.
Please help me, thanks in advance !!
Redux and React-redux are not part of a newly created create-react-app application. If you want to have it, you have to install it by yourself:
create-react-app my-app
cd my-app/
npm install --save redux react-redux
The create react app script will only do the bare bones setup. For any additional modules you want to install you'll need to do so manually.
From the command lines it's pretty simple. For example:
npm i --save redux
The 'i' stands for install
The --save will add it to your package.json dependencies. For some dependencies you may want to do --save-dev instead. These won't be included in a production build (e.g. Dev moudules).
You can also replace the 'i' with 'uninstall' (optionally with the save flags) to remove a dependency you no longer want.
Periodically you'll also want to run the following to update your projects dependencies:
npm update
What is the best way to include bootstrap.css in my sails.js project? I have installed the bootstrap npm package.
npm install bootstrap#3
I believe I am suppose to import that in assets/styles/importer.less but have yet to get it working.
It looks like you may have to use Grunt to compile the less, try running
npm install - just to make sure all the dependencies are pulled in
and then run
grunt - to build the assets
http://sailsjs.org/documentation/concepts/assets/default-tasks#?less
https://github.com/gruntjs/grunt-contrib-less
https://github.com/WebDevStudios/CLI-Cheat-Sheet/blob/master/grunt-commands.md