sass с приложением create response

Версия 2. create-react-app теперь поддерживает Sass. Установите node-sass (например, npm install node-sass), чтобы включить его. Дополнительные инструкции см. В документации. Если вам нужен пример, посмотрите это приложение Компонент навигации.

Я настоятельно рекомендую использовать scss, так как вы все еще можете использовать CSS-модули с SCSS. Я не знаком с настройкой приложения create response, но обычно вы настраиваете webpack с такими загрузчиками стилей:

  {
    test: /\.scss$/,
    loaders: [
      'style-loader',
      { loader: 'css-loader', options: { modules: true } },
      'sass-loader',
    ],
    exclude: [srcDir + '/assets/scss/']
  },

Загрузчики будут выполняться в обратном порядке, начиная с sass-loader, который преобразует ваш scss в обычный css, затем с css-loader и опцией «modules: true» эти стили будут доступны для использования в качестве модулей.

Конечно, это может выглядеть немного иначе, но это будет базовый подход к использованию модулей css с scss.

Чтобы поделиться переменными и миксинами, я всегда использую глобальный файл scss, который потребуется в приложении (например, в app.js). Однако вам все равно придется импортировать этот файл / файлы в каждый компонент-scss, где вам нужны переменные и миксины.

  // GLOBAL STYLES
  {
    test: /\.scss$/,
    loaders: [
      'style-loader',
      'css-loader',
      'sass-loader',
    ],
    include: [srcDir + '/assets/scss/']
  },

В качестве альтернативы вы можете использовать PostCSS-Properties, чтобы сделать ваши компоненты еще более гибкими (например, для предоставления разных тем для вашего приложения, без явного импорта файлов в стилях компонентов), но, как правило, они не поддерживаются IE и потребуют от вас добавления определенных postcss погрузчики.

см. http://cssnext.io/features/#custom-properties-var

Гибкость и ремонтопригодность, которые обеспечивает SASS, очень полезны для больших проектов, особенно с React.

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

create-react-app V2 соответствующий раздел doc: (поддержка из коробки) https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav

Использование Sass / SCSS практически полностью не связано с React. Sass компилируется в обычный CSS, а затем вы используете его как таковой в своем HTML или React.

Что касается общих переменных, когда вы используете @import, он в основном просто берет все из файла, который вы импортируете, и вставляет его, поэтому вы можете просто создать файл _variables.sccs и импортировать его в каждый файл, в котором вы хотите использовать свои глобальные переменные.

//variables.scss
$primary: red;
$secondary: blue;


//main.scss
@import 'variables';

body {
    background-color: $primary;
    color: $secondary;
}