Question

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

Webpack配置

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

Header.jsx

import React from 'react'

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

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

export default Header

我可以通过进行一些更改来使普通的CSS工作：

文件结构 将header.styl重命名为header.css

Webpack配置

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

header.styl

.green {
    color: green
};

Header.jsx

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

节点模块

├── autoprefixer@6.3.7
├── ava@0.15.2
├── babel-loader@6.2.4
├── babel-preset-es2015@6.9.0
├── babel-preset-react@6.11.1
├── css-loader@0.23.1
├── UNMET PEER DEPENDENCY eslint@3.2.0
├── eslint-config-airbnb@9.0.1
├── eslint-loader@1.5.0
├── eslint-plugin-import@1.12.0
├── UNMET PEER DEPENDENCY eslint-plugin-jsx-a11y@2.0.1
├── eslint-plugin-react@5.2.2
├── extract-text-webpack-plugin@1.0.1
├── jeet@6.1.4
├── postcss-loader@0.9.1
├── precss@1.4.0
├── react@15.3.0
├── react-dom@15.3.0
├── style-loader@0.13.1
├── stylus@0.54.5
├── stylus-loader@2.1.2
├── webpack@1.13.1
├── webpack-dev-server@1.14.1
├── webpack-visualizer-plugin@0.1.5
└── yeticss@7.3.0

Webpack stylus-loader无法解析React组件中的.styl文件

0 个答案: