how to include sass file in reactjs

Question

I use browserify to transform my code now getting error while the sass files were getting imported

@import parse error

Can any one help me to sort this issue how to use and integrate

Bombe

Please provide more information, how you are using sass in project, how you are compiling? The current info doesn't help much. – Marquesan

Have a look on npmjs.com/package/scssify – Sophocles

If you liked my answer @naveed consider accepting the answer by hitting that checkmark. – Antipater

SyntaxError: D:/pro1/src/assets/scss/styles.scss: Unexpected token (1:0) @import "./variables"; Getting this error using webpack my webpack.config is like this module:{ rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] }, { test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" } ] } ] } – Bombe

Answer 1

With the latest version of create-react-app you don't have to eject your react app to add sass support.

Just add node-sass to your project:

NPM: npm install node-sass --save

YARN yarn add node-sass

And now you can import sass files in your react components. Check the official documentation here

Ingress

Answer 2

Recently, the React team and a number of contributors released a fantastic tool for creating configuration-less React applications based on a set of minimal ideas to help beginners dive into building React applications without having to worry about tooling a beginner may find daunting.

There are two ways you can add SASS or SCSS to a create-react-app project.

Install With: NPM Scripts

This method is simpler and can work without ejecting your project. If you prefer not to eject, use this method. Click here to view the project’s official guide on how to install Sass or Scss using NPM Scripts.

Install With: Webpack

This method is not as simple, but more extensible and automated. Unfortunately, this method requires ejection. Ejecting a project, although useful in many advanced cases, means that futures updates to create-react-app will not be easy for you to get.

Before starting, install and save the necessary tools from your packager of choice by running one of the following commands in your project directory.

Yarn: yarn add sass-loader node-sass --dev

NPM: npm install sass-loader node-sass --save-dev

Adding sass or scss to your create-react-app project will first require you to eject, which can be done by executing the following command in your project’s base directory.

npm run eject

Once ejection has completed, locate the config folder which holds, among other things, two webpack configuration files. Each of these configuration files corresponds to a different environment — development or production. Enter the development configuration file webpack.config.dev.js and locate the loaders block within the modules block.

In webpack, loaders allow the developer to “pre-process” files as they are required/loaded. Create react app uses multiple loaders to handle various build tasks such as transpiling with babel, prefixing with PostCSS, or allowing the importing of assets. To add Sass or Scss to this project, you will be adding a loader that can process Sass and Scss files.

The beginning of the loaders block, before any modification, should look something like the following code (Exact code may change in future versions of CRA).

loaders: [
  // Process JS with Babel.
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.dev')
  },
  ...

After the beginning of the loaders array, you can add your own loader for Sass and Scss. The “sass” loader featured in the loaders array in the code below is able to process both Sass and Scss files.

If you prefer SASS, you can add:

{
  test: /\.sass$/,
  include: paths.appSrc,
  loaders: ["style", "css", "sass"]
},

If you prefer SCSS, you can add:

{
  test: /\.scss$/,
  include: paths.appSrc,
  loaders: ["style", "css", "sass"]
},

Important: In newer versions of create-react-app, if you see an exclude array in your webpack config, you need to add the following lines to

/\.sass$/,
/\.scss$/,

Now that the Sass and Scss loader is in place, you can begin using Sass/Scss files. For example, in the default App.js component that comes with create-react-app, you could now write

import './App.sass'; // or `.scss` if you chose scss

Note, you’d also have to refactor the “App.css” file to Sass and change its filename to “App.sass”.

Reference is taken from this website.

Antipater

Answer 3

In 2022 node-sass has been deprecated the best way is to just use sass faster and easier to use than node-sass: https://www.npmjs.com/package/sass

Installation:

npm install sass or yarn add sass

Usage:

import "./styles/styles.scss";

It automatically compiles your sass into css and loads it into your project.

Batsheva

Answer 4

If we use create-react-app then to work with sass, you just need to install the node-sass npm package. There is no need of any loader or babel configuration. Create-react-app will handle that for you.

if we are using latest version of react and react-script >=2.0.0 no need to eject. scss files will be loaded by default

Note: this feature is available with [email protected] and higher.

Demasculinize

Answer 5

I was using "scss" files and faced issue in importing it into the component.

Here is the solution which I had found.

step 1: update typings.d.ts (I am using TSX files). and add following code at the root level

declare module '*.scss';

step 2: import your scss file with extention in your component (ex: TodoComponent.tsx) file

import styles from "./score-widget.component.scss";

step 3: add styles in the return statement

import * as React from "react";
import { IScoreWidget } from "../models/score-widget-model";
import styles from "./score-widget.component.scss";

function ScoreWidget(props) {

  const css = styles;  //storing styles in const

  return (
    <React.Fragment>

      <style>{css}</style>  //added css in code

      <div className="score-prop-container">
        <!--Your component logic goes here-->

      </div>
    </React.Fragment>
  );
}

export default ScoreWidget;

Trochanter

Answer 6

Simple:

create scss file name as

index.module.scss

and import in .tsx as

import styles from "./index.module.scss"

Jahdai