I am currently learning sass/scss and I'm trying to set up a webpack configuration for a practice project. So I looked up the tools and technology I'd need, some resources suggested I use "node sass, sass-loader and css-loader"(the webpack documentation) while another suggested post-CSS instead of css-loader. I'd like to know the difference.
TL;DR
No, you don't need postcss-loader in webpack to use SASS. sass-loader would alone do the work. Although, node-sass is required to be installed.
What is PostCSS?
PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
Ref: https://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535
Autoprefixer is one of the highly recommended plugin to use.
What is SASS?
SASS is a CSS preprocessor. Learn more here https://sass-lang.com/guide. sass-loader is webpack loader which does the same thing for you with the webpack tooling.
What does node-sass do?
Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.
It is not any alternative to sass-loader. node-sass is in peerDependencies of sass-loader so you'll need it to use sass-loader.
Ref: https://github.com/sass/node-sass
Can you use both sass-loader and postcss-loader?
Yes! And I would recommend you do use it together. In-fact, if you eject a Create React App project, in the webpack config you can find both sass-loader and postcss-loader used.
It's not required but I do highly recommend the autoprefixer plugin. The loaders allow you to import the specified file types.
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}
}
Related
So, the basic usage of SASS in react is
Install node-sass and import ./mysass.scss in index.js file
I did the same it worked with bootstrap SASS.
I have successfully imported bootstrap.scss in index.js file
import 'bootstrap/scss/bootstrap.scss';
But, now if I try to import mine it did not work.
Let me give you some information about my SASS files.
My style.scss file importing other CSS modules by using #use instead of #import in sass.
For example
Using -> `#use 'sections/navbar';`
Instead of -> `#import 'sections/navbar';`
I am also using #use "sass:map";
Does this #use create the problem?
I have checked the bootstrap.scss file and they are using #import.
See this issue on Github: Link. Solution posted by user asyncLiz.
That error is typically seen when using the node-sass implementation, which does not support Sass modules and is not supported by MDC. You'll need to use the Dart sass implementation.
Luckily it's an easy replacement when using sass-loader. Run npm uninstall node-sass && npm install sass. sass-loader will automatically use the new implementation.
If it does not, check your webpack.config.js in case you're manually specifying the implementation in your sass-loader options. If you are, change implementation: require('node-sass') to implementation: require('sass').
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 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
I'm following a course on Udemy (GIT Workflow) about Web Development. It include Gulp for automation and used PostCSS instead of Sass.
My code editor is VSCode. I install from VSCode Market to support PostCSS (.pcss) . PostCSS . The problem is, I don't know how to compile .pcss to css.
How can I convert PostCSS to valid CSS with Gulp? OR
On Sass, I can easily compile it with node-sass and watch it.
Is there any equivalent of PostCSS ? (i.e node-postcss)
P.S - In my CSS file, I write my postCSS styling. I get many warning regarding with the syntax. I can compile it with gulp, but it does not get right with mixins.
How can I use preprocessors in my ng2 app? I'm using angular-cli and the original docs are not clear enough for me. Besides, I want to use the styles globally, not only component-wide.
Install your CSS compiler: Search npm for your preffered extension language.
Tested and recommended for SASS: npm install node-sass --save-dev
Add your "to be processed" file to src/assets/css (with the normal file extension, e.g. .sass)
Add the style ref to the index.html file:
<link rel="stylesheet" href="assets/css/whatever.css"> - note the .css file extension.
Update your build file (angular-cli-build.js) with the folder of your "to be processed" files. This object HAS to be placed before the vendorNpmFiles-array.:
sassCompiler: { //(lessCompiler or stylusCompiler)
includePaths: [
'app/assets/css' //Only the folder, not your file!
]
}
Bonus answer: Why don't I use direct paths to files instead of the includePath? Because you may want to use variable files, so it could get really messy with absolute paths!
The Angular CLI has built in support for Sass/SCSS, Less, and Stylus. See here.
As of the Webpack update to the CLI, there are no extra steps other than renaming your stylesheets with the appropriate extension.
For the previous System.js/Broccoli versions, it was also necessary to install the preprocessor packages to your app, like so: npm install node-sass --save-dev.
It will automatically process the stylesheets within and under the src folder.