ParseError: expected "indent", got "!"

Question

I am trying to create a Vuejs application using a stylus. I install stylus stylus-loader style-loader css-loaderadd added in build / webpack.base.conf.js to the rules array.

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

and I created an empty file in the src folder name main.styland added to main.js.

when i started npm run devshowing error

Module build error: ParseError: expected "indent", received "!"

What is wrong here ...

Answer 1

Regarding the fact that I had the same problem and that you have a directory buildwith webpack.base.conf.jsinside, I assume that you are using vuejs webpack templateplate as I am.

, Stylus .styl .stylus. , build/webpack.dev.conf.js build/webpack.prod.conf.js, styleLoaders, build/utils.js. build/webpack.base.conf.js.

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

, "vue ^ 2.5.2", vue-cli ^ 2.8.2, , .

webpack.base.conf.js: