How to load scss in React which is not Next.js?

Question

We have a component which is used both in Next.js project and a React project. Component has a css module made with scss. In Next.js it is fairly easy to use it.

https://www.freecodecamp.org/news/how-to-use-sass-with-css-modules-in-next-js/

Only need to add sass module. Strange tough when I use it in React based Wordpress plugin, I got following error:

ERROR in ./tikexModule/styles/buyTicket.module.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .section1 {
|   display: flex;
|   align-items: center;
 @ ./tikexModule/components/BuyTicket/PricingOptionInvoiceItemsFormFieldsCheckboxes.tsx 4:0-56 160:15-26

it can not handle scss . Why? I added sass to both.

Answer 1

Webpack needs to be configured to load the specified extention.

First you need to instal sass loader and sass webpack with:

npm install sass-loader sass webpack --save-dev

Then in your webpack.config.js you need to configure it:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
};

Webpack has great documentation, have a look: https://webpack.js.org/loaders/sass-loader/