Vue-loader: The way of vue-loader processing other loaders

[JasonKid]

I found that if the way vue-loader process other resources is using the accordingly loaders with default options provided by vue-loader.

These options can be overrides by the way below:

{
...
module: {
        rules: [
            {test: /\.vue$/, use: [{
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: `vue-style-loader!css-loader!sass-loader?{"includePaths": ['${resolve(__dirname, '../src/styles')}']}`
                    }
                }
            }]},
        ]
    }
...
}

It doesn't support options attribute of webpack loader, but only supports loader query strings which is very inconvenent.

I advice two solutions:

1. Support the format of options besides query strings.
2. Retrieve the webpack configs for accordingly resources.

[maoberlehner]

I'm not sure if this is related but because vue-loader stringifys loader options, I'm not able to pass custom node-sass importer functions to the sass-loader, am I right, that this is currently not possible or is there any workaround?

[JasonKid]

Just like what i said above, vue-loader can support the format of options of webpack config besides the query strings.

[loilo]

Having the same problem. This prevents developers from using any loader options that accept callbacks (e.g. the mentioned importer option in sass-loader).

[KhramtsovMaksim]

Thanks for you work, vue-guys!
But I can't use sass-laoder's importer option (it's a function), because of vue-loader stringify slave-loaders options((
Please change behavior of vue-loader.

[yyx990803]

You can already use the following (we should probably add it to the docs):

loaders: {
  scss: [
    { loader: 'some-loader', options: { ... }},
    { loader: 'other-loader', options: { ... }}
  ]
}

Note the options still must be stringifiable. This is a hard limitation. We do want to eventually automatically use whatever rules that are configured in the main webpack config, but webpack currently doesn't have a good API for that.

[loilo]

For the record: This issue has been fixed with the way vue-loader is set up since v15.