Skip to content
This repository was archived by the owner on Nov 30, 2020. It is now read-only.
This repository was archived by the owner on Nov 30, 2020. It is now read-only.

Nuxt support #558

Open
Open
@ccleve

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions