Home

Hi guys.

I got issue and it’s driving me nuts. Please help me with that.

I am trying to integrate Google’s material-components-web with Nuxt and got issue with importing SCSS.

The thing is, they for some reason using this kind of path @import '@material/checkbox'; everywhere in node_modules components files, and default Nuxt Webpack settings obviously can’'t resolve that. https://github.com/material-components/material-components-web#css

To fix it I need to include node_modules in Sass include path. And I can’t set it to work. This kind of code is not working:

    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        }, {
          loader: 'sass-loader',
          options: {
            includePaths: [path.resolve(__dirname, '../node_modules')]
          }
        })
      }
    }
  }