При работе с React и SASS/SCSS иногда нужно иметь возможность импортировать переменные из таблицы стилей. На самом деле это довольно просто с Webpack.

В Create-react-app webpack уже сконфигурирован, так что вы можете пропустить его настройку.

Если же вы используете самостоятельно описаный webpack конфиг то вам следует добавить следующее правило:

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: "style-loader" // creates style nodes from JS strings
      }, {
        loader: "css-loader" // translates CSS into CommonJS
      }, {
        loader: "sass-loader" // compiles Sass to CSS
      }]
    }]
  }
}; 

Следующим шагом вам нужно создать файл variables.scss и добавить в него стилевые переменные.

// variables.scss
$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;

:export {
  whiteСolor: $white-color;
  darkСolor: $dark-color;
  lightСolor: $light-color;
}

Теперь давайте подключим созданный файл с переменными в наш React компонент.

import variables from 'variables.scss';

сonst App = () => {
  return (
      <div style={{backgroundColor: variables.whiteСolor}}>
        ...
      </div>
  )
}

export default App;