ParseError:预期的“缩进”，得到"!“

Question

我正在尝试用手写笔构建Vuejs应用程序。我在规则数组中安装了build/webPack.base.con.js中添加的stylus stylus-loader style-loader css-loader添加。

{
  test: /\.styl$/,
  loader: ['style-loader', 'css-loader', 'stylus-loader']
}

我在src文件夹名main.styl中创建了一个空文件，并添加了main.js。

当我运行npm run dev时，它显示了一个错误，

模块构建失败: ParseError:预期的“缩进”，得到"!“

这里有什么问题..。

Answer 1

关于我遇到了同样的问题，以及您的build目录中有一个webpack.base.conf.js，我假设您和我一样使用webpack样板。

关键是这个样板已经定义了Stylus文件.styl或.stylus的加载器。它确实是在build/webpack.dev.conf.js或build/webpack.prod.conf.js中定义的插件的一部分，使用在build/utils.js中定义的函数styleLoaders。您不需要在build/webpack.base.conf.js中添加任何配置。

但是，如果需要将特殊选项传递给stylus-loader，例如，如果您需要为所有组件传递导入库或全局手写文件，则必须将其传递给build/utils.js中的函数cssLoaders，即

const stylusOptions = {
  import: [path.resolve(__dirname, 'relative/path/to/file.styl')]
  // or other options
}

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus', stylusOptions),
  styl: generateLoaders('stylus', stylusOptions)
}

希望它能帮上忙，尽管这篇文章已经很老了。

Answer 2

关于将*.styl导入main.js，我遇到了同样的问题。

我的解决方案:打开webpack.base.conf.js，找到"module.rules“部分，断言

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'stylus-loader'],
}, 

我的项目基于"vue^2.5.2"，vue-cli^2.8.2，希望能对您有所帮助。

我的webpack.base.conf.js文件：

​