Чтобы использовать Sass в React без извлечения, вы можете попробовать несколько методов:

1. Используйте приложение Create React с пакетом node-sass: Create React App — популярный инструмент для настройки проектов React. По умолчанию он не поддерживает Sass, но вы можете добавить поддержку Sass, не извлекая его. Сначала установите пакет node-sass, запустив npm install node-sass. Затем переименуйте файлы .cssв .scss. React автоматически будет использовать пакет node-sassдля компиляции вашего кода Sass.

2. Используйте React Scripts Rewired: React Scripts Rewired — это пакет, который позволяет вам настраивать конфигурацию Create React App без его извлечения. Установите пакеты react-app-rewiredи node-sass, запустив npm install act-app-rewired node-sass. Затем создайте файл config-overrides.jsв корне вашего проекта и добавьте следующий код:

   const path = require('path');
   module.exports = function override(config, env) {
   config.module.rules.push({
   test: /\.scss$/,
   use: [
     {
       loader: require.resolve('sass-loader'),
       options: {
         sassOptions: {
           includePaths: [path.resolve(__dirname, 'src/styles')],
         },
       },
     },
   ],
   });
   return config;
   };

   Эта конфигурация добавляет поддержку файлов Sass и устанавливает путь включения для ваших стилей. Вы можете настроить его в соответствии со структурой вашего проекта.

3. Используйте альтернативу, например craco: craco— это еще один инструмент, который позволяет вам настраивать конфигурацию приложения Create React без его извлечения. Установите пакеты cracoи node-sass, запустив npm install @craco/craco node-sass. Затем создайте файл craco.config.jsв корне вашего проекта и добавьте следующий код:

   const path = require('path');
   module.exports = {
   style: {
   sass: {
     loaderOptions: {
       sassOptions: {
         includePaths: [path.resolve(__dirname, 'src/styles')],
       },
     },
   },
   },
   };

   Эта конфигурация добавляет поддержку файлов Sass и устанавливает путь включения для ваших стилей. Опять же, вы можете настроить его в соответствии со структурой вашего проекта.