Стилус-загрузчик Webpack не может анализировать файл .styl в компоненте React

https://github.com/shama/stylus-loader

Webpack-dev-server выдает следующую ошибку:

ERROR in ./src/styles/header.styl
Module parse failed: /Users/andrew_krueger/code/portal/src/styles/header.styl Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)

Так что мне кажется, что я не правильно настроил свой stylus-loader или с ним проблема.

Структура файла

.
├── LICENSE
├── README.md
├── build
│   └── bundle.js
├── index.html
├── package.json
├── src
│   ├── components
│   │   ├── Canvas.jsx
│   │   ├── Container.jsx
│   │   ├── Header.jsx
│   │   └── Portal.jsx
│   ├── main.jsx
│   └── styles
│       └── header.styl
├── webpack.config.js
└── webpack.config.production.js

Конфигурация веб-пакета

const Visualizer = require('webpack-visualizer-plugin')

module.exports = {
    plugins: [
        new Visualizer()
    ],
    devtool: 'eval-source-map',
    entry: './src/main.jsx',
    output: {
        path: './build',
        filename: 'bundle.js'
    },
    module: {
        preloaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'eslint'
        }],
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
        },
        {
            test: /\.styl$/,
            exclude: /node_modules/,
            loaders: ['style', 'css', 'stylus']
        }]
    },
}

header.styl

.green
    color: green

Заголовок.jsx

import React from 'react'

require('../styles/header.styl')

const Header = () =>
    <div className="green">Header</div>

export default Header

Я могу заставить работать обычный CSS, внеся несколько изменений:

Структура файла Переименуйте header.styl в header.css

Конфигурация веб-пакета

{
  test: /\.css$/,
  exclude: /node_modules/,
  loaders: ['style', 'css']
}

header.styl

.green {
    color: green
};

Заголовок.jsx

require('../styles/header.css')

Модули узла

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

person A.Krueger    schedule 01.08.2016    source источник
comment
Извините за вопрос, но вы уверены, что stylus-loader находится в node_modules?   -  person David Gilbertson    schedule 02.08.2016
comment
Привет, да, я так думаю. Я добавил модули узлов верхнего уровня в OP.   -  person A.Krueger    schedule 02.08.2016
comment
Тогда без понятия, извините, мне все кажется правильным.   -  person David Gilbertson    schedule 02.08.2016
comment
проверьте мой ответ - это решение для вас stackoverflow.com/questions/52111496/   -  person Konstantin Eletskiy    schedule 05.03.2020