How to introduce scss into react project

First download the dependencies

yarn add sass-loader node-sass

Then in the project path

node_modules/react-scripts/config/webpack.config.js

Open the file and find

Add the code in red line

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

You can use scss

Knowledge point expansion:

React pwa configuration

Add the plugin to the webpack configuration file

const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new WorkboxWebpackPlugin.GenerateSW({
            clientsClaim:true,
            skipWaiting:true
        })
    ],

This is the end of this article about how to introduce scss into react projects. For more relevant content about introducing scss into react projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!