Nuxt support

[ccleve]

Describe the bug This is similar to #529. It does not seem possible to get paths to resolve when using Nuxt.

To Reproduce

1. Create a plain-vanilla Nuxt app using "npx create-nuxt-app myapp". Make it an SPA.
2. Confirm that the app runs
3. Run "npm install --save-dev node-sass sass-loader" to enable scss loading.
4. Follow the exact instructions for bundler usage: https://matsp.github.io/material-components-vue/guide/#bundler-usage npm install --save material-components-vue Then put the exact Hello component as hello.vue in /pages.
5. Run "yarn dev"

The compiler will generate this error:

SassError: File to import not found or unreadable: @material/elevation/mixins.
        on line 23 of node_modules/@material/button/_mixins.scss
        from line 23 of node_modules/@material/button/mdc-button.scss
        from line 1 of node_modules/material-components-vue/dist/button/styles.scss
        from line 15 of /Users/ccleve/temp/foop/myfoop/pages/hello.vue
>> @import "@material/elevation/mixins";

It appears to have something to do with the sass-loader not being able to resolve paths. A bit of googling finds the error, but none of the solutions for configuring sass-loader in Nuxt seem to work.

Expected behavior I expect the material package to be able to resolve its own dependencies.

Desktop (please complete the following information): Mac Firefox

[tychenjiajun]

Seems like a sass-loader related problem. I use the following config in nuxt.config.js and get the same error

  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, { loaders: { sass }}) {
      sass.sassOptions.includePaths = ["./node_modules"]
    }
  }

[Alan-Liang]

Personally I use Nuxt Components with a custom derivative of this package as Vue SFCs (@keeer/material-components-nuxt). The config is as follows:

  components: [
    '~/components',
    { path: '~/node_modules/@keeer/material-components-nuxt/components', prefix: 'm-' },
  ],
  build: { loaders: { scss: { additionalData: '@import \'~/assets/styles.scss\';\n' } } },