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
Description
Describe the bug
This is similar to #529. It does not seem possible to get paths to resolve when using Nuxt.
To Reproduce
- Create a plain-vanilla Nuxt app using "npx create-nuxt-app myapp". Make it an SPA.
- Confirm that the app runs
- Run "npm install --save-dev node-sass sass-loader" to enable scss loading.
- 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. - 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 commentedon Feb 22, 2020
Seems like a sass-loader related problem.
I use the following config in nuxt.config.js and get the same error
Alan-Liang commentedon Sep 27, 2020
Personally I use Nuxt Components with a custom derivative of this package as Vue SFCs (
@keeer/material-components-nuxt
). The config is as follows: