I want to remove node-sass from my current react project. I want to get off sass and move to simple css format. How do I do it using npm? How to remove sass-dependency from the webpack config file which create-react-app uses internally? Overall, how to just remove everything related to sass from the project?
the following steps worked for me
1.goto node modules in your project files.
2.look for node-sass folder
3.delete the node-sass folder
Related
I'm just starting to learn React (have some JavaScript knowledge, as I'm learning tis as well) and building my first project. I would like to know how to add styles to my first React project, using CSS/SCSS as I have some knowledge and understanding from my html, CSS/SCSS learning projects.
How do you add SCSS to your React Project?
If using create-react-app then:
1)First install sass dependency using npm:
npm install sass --save-dev
2)Import your sass file to your componentName.js file
import '../scss/FileName.scss';
The way to use scss depends a bit on your React development environment. For beginners React recommends using Create React App which is, according to them, "a comfortable environment for learning React, and is the best way to start building a new single-page application in React." You can read more about it at https://reactjs.org/docs/create-a-new-react-app.html. To create your app you simply type the following at the command line:
npx create-react-app my-app
After that, React sets up a full development environment with css files you can edit to style your code.
If you want to continue using create-react-app (sometimes called CRA) and use scss then you can install the Dart Sass library by typing:
npm i sass --save-dev
(Keep in mind that node-sass in deprecated and we are using Dart Sass instead of it)
For a full explanation about how to use node-sass and CRA together see "How to Use SASS in Create React App?": https://www.robinwieruch.de/create-react-app-with-sass-support
Once you move beyond CRA you can tinker with your own webpack.config.js which can also be set up to compile and import SCSS files. But if you are just starting out with React then you may want to leave tinkering with your webpack.config.js for later and stick with CRA.
If you are using create-react-app, just add sass as a dev dependency.
yarn add -D sass or npm install --save-dev sass
Then just replace/rename all CSS files and corresponding imports to *.scss instead of *.css
first, install sass in your project. Then import it into your component.
install sass:
Using npm:
npm install sass
Using yarn
yarn add sass
import in your component:
import example from './example.scss'
Node-sass is deprecated, use sass.
install sass:
Using npm: npm install sass --save-dev
Using yarn: yarn add sass
import in your component: import example from './example.scss'
if you are in starting your new project and want control over webpack config, try to use react-app-rewired or craco, they offer you control over webpack config, by which you can add any loader into your config.
if CRA suffices your need then no need to complicate things above-mentioned packages.
Thanks
npm install sass
create theme/assets folder inside src.
add variable mixins file with underscore.
incude scss file in component scss file.
#import './Assets/mixins';
Here is an link to sample react project with scss
The steps to add Sass to Create React App are:
Install node-sass:
npm install node-sass
or
yarn add node-sass
Since node-sass has deprecated therefore you can use the following steps to install sass :-
npm install sass --save-dev
**or**
yarn add sass
Convert your .css files to .scss
Import your .scss files in your React components like App.js
I'm developing with vue.js and vue cli 3. Currently I handle my CSS styles with SASS and compile them with Koala-app. At the moment I am still using it because it is very easy to configure the main.scss and their respective files, and then compile it with autoprefix, in compressed format and with source map to another folder with the name styles.css, I keep the following structure:
I need to replace koala with NPM SASS Loader, how do I replicate this same configuration with VUE CLI 3? The information for the webpack should be added in vue.config.js? Or where? and what would be the parameters to achieve the same effect?
I want to customize Bootstrap 4 theme such as colors, fonts, etc..
I read the instructions from Bootstrap website saying that I need to create custom.scss file and import Bootstrap’s source Sass files like this
// Custom.scss
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
I'm new to both Sass and NodeJS and I do not know how to get started with a NodeJS and Sass project.
I went as far as installing NodeJS and Sass on my Mac using brew. I also installed Bootstrap by typing:
npm install bootstrap
This is the most progress I have made. I do not know in which path the bootstrap files are installed when I did the command npm install bootstrap and also I do not know how to bring that Bootstrap installation into my project folder.
Could anyone please provide some information or point me to a resource on how to get started with a NodeJS and Sass project so I can customize Bootstrap 4 theme using Sass.
You have to run the npm install bootstrap command inside your project directory. Bootstrap and its files will then be installed into the directory node_modules/bootstrap inside your project directory.
Now, when placing your custom scss files into this folder, they will be able to access the node_modules directory, in which bootstrap is.
You can then create a custom building pipeline using npm tools for compiling scss files to css. This requires more in-depth knowledge on node.js and NPM, but that is the usual and recommended way of doing it.
If you just want to compile the scss once and work with the css from there without having to use node.js more in depth, you can use packages like scss-compile and then use console commands like node-sass -rw scssFiles -o cssOutputFiles to compile your custom theme once.
I am using Angular CLI for Angular2 project. And I am using less for my styling.
To compile less file with Angular CLI, I have to import less file with its absolute path. Which breaks editor's intellisense. So instead of using LESSPlugin comes with AngularCLI, I want to use IDE's less watcher and compiler (available in vs code as well as webstorme) to compile less to css.
But there are less files still exists in source, 'ng serve' try to compile less and that breaks the build.
Is there any way to configure angular cli to ignore less file and use available css in source folder?
I manage to do that by uninstalling less module from project using 'npm uninstall less --save-dev'
Now I can use relative path for less import and also intellisense is working now.
When you generate a new project using angular cli, type a command like below:
ng new new-project --style less
It will setup your project using less. When you serve(run) the project each time, angular cli will automatically compile your less files.
According to ng command manual
ng new <options...>
--style (String) (Default: css)
I'm already using bootstrap.css. But i would like to surcharge the less variables without using bootstrap customize editor.
I would like to add a less file in my project. My project is a simple nodejs project with express and harpejs.
Where to find the less file ? Using express it will compile it when i will deploy the project ?
Thanks.
Look at using bower.
npm install -g bower
bower install bootstrap
You will then find all the less files in bower_components/bootstrap/less/*. Copy the bootstrap.less file to your CSS directory and make alterations (make sure the paths are correct).
You can then look at using some Grunt tasks to get the less to build.