Nuxt.js: Extend vue loader config to use sass options

[flootr]

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?

_{This question is available on Nuxt.js community (#c662)}

[alexchopin]

<style lang="scss">
  @import '~node_modules/arbitrary-dependency/arbitrary-scss-file';
</style>

[flootr]

@alexchopin is there no way to resolve it as stated in my question above? Your solution won't work, because the sass file I require also uses this notation.

[Atinux]

@flootr use build.extend

nuxt.config.js:

const path = require('path');

module.exports = {
  build: {
    extend (config) {
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.query.loaders.scss = 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({ includePaths: [path.resolve(__dirname), 'node_modules'] })
    }
  }
}

[flootr]

This worked, thanks @Atinux 💐

[kodekoder]

Hi. Thanks for answer @Atinux I had the same issue with Google's material-components-web. With this code I was able to run app without error, but if I then go to the page I got an error:

 Nuxt.js Error:

/home/nman/TESTING/mdc-nuxt/node_modules/@material/checkbox/index.js:17
import {MDCComponent} from '@material/base';
^^^^^^

SyntaxError: Unexpected token import

[kodekoder]

May be I need to add fallback? Or include path for .js too? https://github.com/material-components/material-components-web/blob/master/framework-examples/vue/build/webpack.base.conf.js

[lehni]

See here for a solution that works for stylus as well as sass / scss: https://github.com/nuxt/nuxt.js/issues/387#issuecomment-327229427

[hackuun]

@Atinux this solution are working no more. Is there any changes to API? Igot this error

  TypeError: Cannot read property 'loaders' of undefined

[Atinux]

@iamdubx

const path = require('path');

module.exports = {
  build: {
    extend (config) {
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.options.loaders.scss = 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({ includePaths: [path.resolve(__dirname), 'node_modules'] })
    }
  }
}

[pirmax]

Hi,

I've an error when I push on production on Dokku (Heroku like).

Cannot find module "!!vue-style-loader!css-loader!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-4c9c6ca6","scoped":true,"hasInlineConfig":true}!sass-loader?{"includePaths":["/app/config","node_modules"]}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue"

My build config on nuxt.config.js:

build: {
    analyze: {
      analyzerMode: 'static',
      generateStatsFile: true,
      statsFilename: 'webpack-stats.json',
      openAnalyzer: false
    },
    vendor: [
      'axios',
      'vuetify'
    ],
    extend (config) {
      config.resolve.alias['vue'] = 'vue/dist/vue.common'
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.options.loaders.scss = 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
        includePaths: [
          path.resolve(__dirname), 'node_modules'
        ]
      })
    }
  },

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.