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>