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

Nuxt support #558

Open
ccleve opened this issue Feb 21, 2020 · 2 comments
Open

Nuxt support #558

ccleve opened this issue Feb 21, 2020 · 2 comments

Comments

@ccleve
Copy link

ccleve commented Feb 21, 2020

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
Copy link
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
Copy link
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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants