ParseError: expected "indent", got "!"

Question

I am trying to build an Vuejs application with stylus. I install stylus stylus-loader style-loader css-loader add added in build/webpack.base.conf.js at rules array.

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

and I created a empty file in src folder name main.styl and added in main.js.

when I run npm run dev its showing an error,

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

What wrong goes here...

Answer 1

Regarding the fact I had the same issue, and that you have a build directory with webpack.base.conf.js inside, I assume that you are using the vuejs webpack boilerplate as I do.

The point is that this boilerplate already defines the loaders for Stylus files .styl or .stylus. It is indeed part of a plugin defined in either build/webpack.dev.conf.js or build/webpack.prod.conf.js, using function styleLoaders defined in build/utils.js. You don't need to add any configuration in build/webpack.base.conf.js.

However, if you need special options to be passed to stylus-loader, for instance if you need to import a library or a global stylus file for all your components, you have to pass it in function cssLoaders in build/utils.js, ie:

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)
}

Hope it helps, though this post is quite old.