Компиляция SASS/SCSS в Create-React-App

Главные вкладки

Аватар пользователя Dar Dar 30 ноября 2016 в 16:40
1

Задача

Реализовать поддержку автоматической компиляции sass/scss файлов в React.js инструменте Facebook.

Решение

  1. Устанавливаем sass-loader и node-sass.
    npm install sass-loader node-sass --save-dev
  2. Добавляем loader в файл node_modules/react-scripts/config/webpack.config.dev.js
    ...
    loaders: [
          // Process JS with Babel.
          ...
          {
            test: /\.scss$/,
            include: paths.appSrc,
            loaders: ["style", "css", "sass"]
          },
        ]
      },
    ...
  3. Импортируем стили в код компонента.
    import './App.scss';