Как добавить sass в webpack + react?

Question

[Millerish]

Добрый день!

Как правильно добавить sass в кофиг webpack + react?

var path = require('path');

var BUILD_DIR = path.resolve(__dirname, './');
var APP_DIR = path.resolve(__dirname, 'src/');

var config = {
    entry: APP_DIR + '/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: BUILD_DIR
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader'
            }
        ]
    }
};

module.exports = config;

Желательно чтобы можно было подключать так: import './style.sass'

git

Ошибка:

ERROR in ./src/index.jsx
Module parse failed: C:\Users\steko\Desktop\TEST\m-react\src\index.jsx Unexpected token (9:8)
You may need an appropriate loader to handle this file type.
| render () {
| return (
|
| Hello React Project!!!
|

Answer 1

[Данакт Фрост]

Используйте sass-loader. В репозитории есть инструкция по установке. Если хотите использовать CSS-модули, читайте инструкцию к css-loader

Comments

[Millerish]

Данакт Фрост, у меня не получилось loader правильно сместить и Import. Писало мол что за фигня в js sass. Я так понимаю это просто для sass to css, а у меня react+sass to js+css.

[Данакт Фрост]

Millerish, читайте инструкцию внимательнее. У вас точно установлены css-laoder и style-laoder?

[Millerish]

Данакт Фрост, да, выдает ошибку(обновил вопрос)

[Данакт Фрост]

Millerish, зашел в репозиторий. Почему вы используете одновременно и rules и loaders в webpack.config? Используйте только rules

[Millerish]

Данакт Фрост, я только вчера более-менее с webpack познакомился, как правило? loaders, был в примере по подключения react.

Answer 2

[Олег Гамега]

а чем create-react-app не удружил ? там это из коробки есть, только включить нужно

Comments

[Millerish]

Данакт Фрост, в кастомном есть

[Millerish]

Олег Гамега, мне нужны другие пути для файлов

[Данакт Фрост]

Millerish, давно не заглядывал в репозиторий create-react-app, в последний раз там даже упоминаний про less/sass не было.

[Millerish]

Данакт Фрост, типа такого https://www.npmjs.com/package/create-react-app-sass

[Данакт Фрост]

Millerish, нет, в самом create-react-app есть инструкция как подключить css-препроцессор