Add Sass (.scss) to ejected create-react-app config

create-react app scss
create-react app sass without ejecting
create-react app sass modules
create-react-app 2 sass
react sass webpack
create-react-app-typescript sass
scss in react component
create-react-app with sass configuration

I want to add .scss support in my app, which was created using create-react-app.

I did eject npm run eject and installed necessary dependencies: npm install sass-loader node-sass --save-dev

Inside config/webpack.config.dev.js I added to the loaders this snippet:

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

So the beginning of the loaders array now look like so:

loaders: [
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: require('./babel.dev')
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      // LOAD & COMPILE SCSS
      {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: ["style", "css", "scss"]
      },

Now in my jsx when I try to import scss file:

import './assets/app.scss';

I get an error:

Uncaught Error: Cannot find module "./assets/app.scss"

So my config must be wrong as I'm not able to load .scss files. How to adjust config to load .scss files in ejected create-react-app?

Check the first loader, first it get all the files and it excludes the other loaders files

loaders: [
        {
            exclude: [
                /\.html$/,
                /\.(js|jsx)$/,
                /\.css$/,
                /\.json$/,
                /\.svg$/
            ],
            loader: 'url',
            query: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]'
            }
        },

so adding

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

to exclude, seems that fixed the same problem I had :D

Adding SASS to Create React App w/o Ejecting - Ariel Salem, Easy Guide to adding SASS onto your CRA without Ejecting. So you've been In order to add SASS onto your Create React App, you'll need to first run this installation commands: First thing we're going to need to do is create an App.​scss file. Customize webpack config of React App created with Create-react-​app. NOTE: For latest version of create-react-app (since react-scripts@2.0.0) all you need to do is install node-sass and import a file with the extension .scss or .sass. This article is for the versions prior to react-scripts@2.0.0 Often times when I try to bootstrap my react apps using

When trying to integrate sass into empty react project I used this article. The solution presented there did not work and received the similar error as in the subject. In my case replacing style-loader with require.resolve('style-loader') helped:

 {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
  },

Adding Sass or Scss to Create-React-App - Connor Elsea, Once ejection has completed, locate the config folder which holds, among other things, two webpack configuration files. Each of these configuration files  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.

OK, I found the solution - changed from this:

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

to this:

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
},

And now my .scss files are loading!!

How to use Sass and CSS Modules with create-react-app, Sass or CSS Modules in your project, you would have to eject from create-react​-app, learn Webpack configurations, install Sass loaders and  This explains how to add the SASS/SCSS precompiler to an existing create-react-app project. This will work with the regular or Typescript variations of create-react-app, and should work regardless of the numerous webpack config syntax variations out there. Eject. You’ll need to eject your project if you haven’t already.

You probably have to use

include: paths.appSrc,

option to enable webpack hot-reload. So you config snippet could looks like

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

Adding a Sass Stylesheet, Pre-Rendering Static HTML · Advanced Configuration · Alternatives to Ejecting Generally, we recommend that you don't reuse the same CSS classes across components, we recommend creating a <Button> component with its own . setting in your .flowconfig so it'll recognize .sass or .scss files. To specify more directories you can add them to SASS_PATH separated by a : like path1:path2:path3. If you set SASS_PATH=node_modules:src , this will allow you to do imports like @import 'styles/colors' ; // assuming a styles directory under src/, where _colors.scss partial file exists.

Check this loader settings for the latest versions.

{
     test: /\.scss$/,
     use: [
         "style-loader", // creates style nodes from JS strings
         "css-loader", // translates CSS into CommonJS
         "sass-loader" // compiles Sass to CSS
    ]
}

Add SASS to ejected create-react-app config - reactjs - html, I want to add .scss support in my app, which was created using create-react-app. I did eject npm run eject and installed necessary dependencies: npm install  This will make the application “full screen” by default. There are other things you can do here. For instance, the entire Bootstrap4 is based on SASS, so you can pull that in easily. Just like create-react-app, you want to import the index.scss file into your index.tsx file:

How To Add Sass Support to a Create-React-App Project (after , By default, create-react-app abstracts most of the configuration away so you So it's in this 'ejected' state that I need to add Sass support. Inside of this array you should see rules for dealing with images, css, and js files. Adding postcss-cssnext to create-react-app and i can see auto Autoprefixer in App.css file. i did use node-sass-chokidar. can you please tell me is there any other special way to set up those things to get work ?

Using Sass with React (without ejecting or running an extra process), The simplest way to create a React app is by using the official Create React of create-react-app by revealing all the build dependencies, configs, and Sass is a Ruby gem so one could run a conversion to CSS using this All that's left is to add the sass conversion script as part of the React start process. If you need anything on top of that, you’ll need to add it as a separate step in your build process. If you feel like writing your extension, you’re on your own. Good luck with that. This is where PostCSS comes in. In a nutshell, PostCSS does the same thing as LESS/SASS/SCSS But enhance it with a few plugins, and it can do much more.

Using Sass with Create React App V1 (Without Ejecting), If you're not familiar, Create React App (CRA) provides a handy CLI You can run the eject script to get access to the Webpack config, and add in Sass We'll configure Sass to watch our scss folder and export css files that  So it’s in this ‘ejected’ state that I need to add Sass support. This tutorial assumes you have already setup your project using `create-react-app` and have run `npm run eject`. This first thing we need to do is install 3 packages, node-sass, sass-loader, and resolve-url-loader.

Comments
  • or { test: /\.scss$/, include: path.appSrc, loaders: [ 'style-loader', 'css-loader', 'sass-loader'] }, worked for me