Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.86k stars 4.74k forks source link

"relative modules were not found" error throwing while importing to Nuxt.js #5733

Closed hanetooth closed 6 years ago

hanetooth commented 6 years ago

I'm importing materialize-css to my nuxt.js project and it's throwing following errors on npm run dev

ERROR  Failed to compile with 10 errors 

These relative modules were not found:

* ../fonts/roboto/Roboto-Bold.woff in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Bold.woff2 in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Light.woff in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Light.woff2 in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Medium.woff in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Medium.woff2 in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Regular.woff in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Regular.woff2 in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Thin.woff in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss
* ../fonts/roboto/Roboto-Thin.woff2 in ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./modules/app.scss

package.json

{
  "name": "movie_db",
  "scripts": {
    "dev": "nuxt"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "jquery": "^3.2.1",
    "material-design-icons": "^3.0.1",
    "materialize-css": "^0.100.2",
    "nuxt": "^1.4.0"
  },
  "devDependencies": {
    "node-sass": "^4.8.1",
    "sass-loader": "^6.0.7"
  }
}

nuxt.config.js

module.exports = {
    css: [
        {
            src: '~/modules/app.scss',
            lang: 'scss'
        }
    ]
}

modules/app.scss

@import "~materialize-css/sass/materialize";

hanetooth commented 6 years ago

import the css than scss solved the problem

@import "~materialize-css/sass/materialize";

to

@import "node_modules/materialize-css/dist/css/materialize.css";

Dogfalo commented 6 years ago

The roboto fonts have been removed in the latest versions, although in your case it sounds like you're missing the fonts

hanetooth commented 6 years ago

@Dogfalo Currently using version is 0.100.2. Not the latest versions. And is has font files in its dist/fonts.