Как использовать React + .scss?

Question

[dhat]

Познаю таинства Реакта. Вещь конечно гениальная, без преувеличений. Но возник вопрос, гуглить уже сил не хватает самому, прошу помочь)))

Есть ли какие-то бойлерплейты или модули, где можно юзать SCSS на стадии разработки? Gulp не предлагать! На проекте с Реактом хочу без него обойтись. Вероятно, мне поможет webpack? Или есть другой сетап? Помогите плз.

Answer 1

[yogurt1]

stlyed-components
PostCSS прямо внутри компонента
Выглядит так:

import React from "react"
import styled from "styled-components"

const Button = ({children}) => <a>{children}</a>
const StyledButton = styled(Button)`
  color: green; font-size: 60px; border: 1px solid purple; background: lightblue;
`

const SomeView = () => (
  <div>
    SomeButton: <StyledButton href="/about">about<StyledButton>
  <div>
)

Comments

[dhat]

Это конечно трудно назвать scss. Но за вариант спасибо.

[dhat]

Хотя, вот этот пример с сайта то что надо похоже.

import React from 'react';
import styled from 'styled-components';

// Create an component that'll render an tag with some styles
const Input = styled.input`
font-size: 1.25em;
padding: 0.5em;
margin: 0.5em;
color: palevioletred;
background: papayawhip;
border: none;
border-radius: 3px;

&:hover {
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
`;

[dhat]

Непонятно только, почему дебильно ` а не {

[yogurt1]

dhat: Это называется Tagged Template string, фишка ES6. styled - функция, которая принимает компонент (или строку, типа div, h1) и возвращает функцию. Через `...` мы вызываем эту функцию, которой передаем интерполяции. Можно на основе props менять свойства CSS, например:

const BG = "red";
styled("span")`
  border: 1px solid ${props => props.blue ? "blue": "green"};
  backround-color: ${BG};
`

styled вставляет в head документа обработанный PostCSS-ом css-код, а уже компоненту в props подмешивает className. className получается как при CSS-modules - хеш

Answer 2

[Максим Корольский]

webpack

Comments

[dhat]

Я совсем мало с вебпаком баловался (буду учить обязательно, но не сегодня).
Сейчас стартанул с create-react-app.
Как мне за полчаса включить поддержку scss, кроме webpack?

[Максим Корольский]

{
test: /\.scss$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[local]',
'postcss',
'sass'
],
},