模块解析失败：关于手写笔文件的意外标记 (2:11)答案

【问题标题】：Module parse failed: Unexpected token (2:11) about stylus file模块解析失败：关于手写笔文件的意外标记 (2:11)
【发布时间】：2018-02-04 03:40:53
【问题描述】：

我在使用 Vue.js 的浏览器中出现以下错误：

Failed to compile.

./src/assets/styles/global.styl
Module parse failed: Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
| 
| html, body {
|   margin: 0
|   padding: 0
 @ ./src/main.js 4:0-37
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8081 webpack/hot/dev-server ./src/main.js

在我的webpack.config.js -> module -> rules，这是我的.styl 文件的配置：

{
    test: /\.styl$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true,   
        }
      },
      'stylus-loader'
    ],
  },

我的代码global.styl 如下：

html, body {
  margin: 0
  padding: 0
  width: 100%
  height: 100%
}

body {
  background-image url("../imgs/01.jpg")
  background-size: cover
  background-position: center
  font: 14px 'Helvetica Neue'
  font-weight: 300
}

【问题讨论】：

标签： webpack vue.js stylus webpack.config.js

【解决方案1】：

您已经在webpack.config.js 模块规则中配置了'stylus-loader'，但仍然出现错误。

那应该是您没有将stylus-loader 安装到您的node_modules。

安装stylus 和stylus-loader：

npm i stylus@>=0.52.4 stylus-loader

然后重新命名pnm run dev。

【讨论】：