ParseError:预期"缩进",得到"!"

Question

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

{
  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,我假设你像我一样使用vuejs webpack样板.

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

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

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'],
}, 

我的项目基于“vu​​e^2.5.2”，vue-cli^2.8.2，希望可以帮助你。

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