search

nuxt-modules / style-resources

Style Resources for Nuxt 3
MIT License
587 stars 22 forks source link

nuxt-ts compatibility? #29

Closed lukasjuhas closed 5 years ago

lukasjuhas commented 5 years ago

Hey, thanks for the package.

I was wondering if anyone else has problems using this with nuxt-ts that came with nuxt 2.4 ?

I've gone through the example, and through issues here on github to make sure my set up is correct but I cannot seem to get working.

In my case, I'm trying to import scss variables.

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/dotenv',
    '@nuxtjs/style-resources',
  ],

  styleResources: {
    scss: '@/assets/styles/_variables.scss',
  },
...
"scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "lint": "prettier --no-semi --single-quote --write **/*.js **/*.vue !test/target/** !dist/**",
    "generate": "nuxt-ts generate",
    "precommit": "npm run lint"
  },
"dependencies": {
    ...
    "@nuxtjs/style-resources": "^0.1.1",
    "nuxt-ts": "^2.4.0",
    ...
  },
 "devDependencies": {
    ...
    "@types/node": "^10.12.19",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.2.4"
    ...
  }
...

Thanks for your help and suggestions.

manniL commented 5 years ago

Use scss: ['...'] (an array instead of a single string) ☺️

lukasjuhas commented 5 years ago

Thanks @manniL , unfortunatelly, that didn't help 👀 

styleResources: {
    scss: [
      '@/assets/styles/_variables.scss'
    ],
  },

I tried also ~ instead of @, as well as removing yarn lock file, removing node_modules and re-installing them. Any other suggestions? Cheers!

The errors I'm getting look like this:

...
 ERROR  Failed to compile with 5 errors                                                                                                                                          friendly-errors 16:36:48

 ERROR  in ./pages/index.vue?vue&type=style&index=0&lang=scss&                                                                                                                   friendly-errors 16:36:48

Module build failed (from ./node_modules/sass-loader/lib/loader.js):                                                                                                             friendly-errors 16:36:48

    font-size: $font-size-base;
              ^
      Undefined variable: "$font-size-base".
...
manniL commented 5 years ago

Strange. Can you try to add sass-resources-loader manually by using yarn add sass-resources-loader (or the npm equivalent) to make sure it's really not a dependency issue? ☺️

lukasjuhas commented 5 years ago

Thanks! Unfortunatelly that didn't help 🙈 @manniL . Same thing.

manniL commented 5 years ago

@lukasjuhas Alright. Would you mind to create a minimal reproduction via https://template.nuxtjs.org/ so we can debug that better? ☺️

lukasjuhas commented 5 years ago

Sounds like a good plan @manniL, will do that shortly. Thanks.

dschewchenko commented 5 years ago

I have the same issue

dschewchenko commented 5 years ago

After deleting all node_modules, package-lock.json, reinstall all packages and rename nuxt.config.js to nuxt.config.ts - all good :)

lukasjuhas commented 5 years ago

You are a star @dschewchenko ! Thank you so much. that did it for me. Had to rename nuxt.config.js to nuxt.config.ts

Thank you very much for your help @manniL, at least this issue will help someone else who is having the same problem.

ux-engineer commented 5 years ago

Having this same problem none of the above mentioned did the trick.

manniL commented 5 years ago

@envision create a new issue with reproduction then.