Static GitHub Issues

[772] Extend vue loader config to use sass options

prev: Custom code-splitting for page bundles?
next: Implementing D3 as client-side only package

I wonder if it's possible to extend the settings how nuxt.js is loading vue files. Basically I want to achieve the following snippet to work:

<!-- arbitrary-component.vue -->
<style lang="scss">
  @import 'arbitrary-dependency/arbitrary-scss-file';
</style>

Currently it throws the following error:

Module build failed: 
@import 'arbitrary-dependency/arbitrary-scss-file';
^
      File to import not found or unreadable: arbitrary-dependency/arbitrary-scss-file.

What I need to do is to tell the sass-loader to resolve the node_modules directory with the available option includePaths. Normally, I'd attend the corresponding query to my loader configuration like so:

{
  test: /\.scss$/,
  loader: 'sass-loader?' + JSON.stringify({ includePaths: [path.resolve(__dirname), 'node_modules'] })
}

However, I can't add this to the loader section because that's not how Nuxt.js is loading .vue files. I'd need to extend how .vue files are loaded and customize the query params in here.

I tried this with setting build.loaders (nuxt.config.js) to:

loaders: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    query: {
      loaders: {
        'scss': 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({ includePaths: [path.resolve(__dirname), 'node_modules'] 
      }
    }
  }
]

Unfortunately, I then get another error within the browser saying:

TypeError: Cannot read property 'toLowerCase' of undefined

So I assume that's not the correct way to do this.

Is there an actual way how I can achieve this?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c662">#c662</a>)</em></sub></div>