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

Activity

tychenjiajun

tychenjiajun commented on Feb 22, 2020

@tychenjiajun
Contributor

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

Alan-Liang commented on Sep 27, 2020

@Alan-Liang
Contributor

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' } } },
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ccleve@tychenjiajun@Alan-Liang

        Issue actions

          Nuxt support · Issue #558 · matsp/material-components-vue