webpack - ParseError : expected "indent", 得到 "!"

Question

我正在尝试使用手写笔构建 Vuejs 应用程序。我安装 stylus stylus-loader style-loader css-loader add 添加到 build/webpack.base.conf.js 中的 rules 数组。

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

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

当我运行 npm run dev 时显示错误，

Module build failed: ParseError: expected "indent", got "!"

这里出了什么问题...

Answer 1

关于我有同样问题的事实，并且你有一个 build 目录，里面有 webpack.base.conf.js，我假设你正在使用vuejs webpack boilerplate和我一样。

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

但是，如果您需要将特殊选项传递给 stylus-loader，例如，如果您需要 import a library或 global stylus file对于所有组件，您必须将其传递到 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)
}

希望对您有所帮助，尽管这篇文章已经很老了。