search

gridsome / gridsome-starter-blog

A simple, hackable & minimalistic starter for Gridsome that uses Markdown for content.
https://gridsome-starter-blog.netlify.com/
387 stars 203 forks source link

SCSS on Vue components cannot be found at build #25

Open cdvillard opened 5 years ago

cdvillard commented 5 years ago

System: Mac OS High Sierra Gridsome version: gridsome v0.6.5, @gridsome/cli v0.2.1

After I run gridsome create <dir> https://github.com/gridsome/gridsome-starter-blog.git, I'll cd into the folder and run gridsome develop to be hit with a compile error:

 ERROR  Failed to compile with 9 errors                                                                                                                                 9:18:42 AM

This dependency was not found:

* ~/assets/style/index.scss in ./src/main.js

To install it, you can run: npm install --save ~/assets/style/index.scss

These relative modules were not found:

* ./Post.vue?vue&type=style&index=0&lang=scss& in ./src/templates/Post.vue
* ./Default.vue?vue&type=style&index=0&lang=scss& in ./src/layouts/Default.vue
* ./Author.vue?vue&type=style&index=0&lang=scss& in ./src/components/Author.vue
* ./PostCard.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostCard.vue
* ./PostMeta.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostMeta.vue
* ./PostTags.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostTags.vue
* ./Logo.vue?vue&type=style&index=0&lang=scss& in ./src/components/Logo.vue
* ./ToggleTheme.vue?vue&type=style&index=0&lang=scss& in ./src/components/ToggleTheme.vue

I've encountered the same issue trying to run build on a freshly created project using another project forked from this, though with less issues. 

 ERROR  Failed to compile with 5 errors                                                                                                                                 9:13:04 AM

These relative modules were not found:

* ./Post.vue?vue&type=style&index=0&lang=scss& in ./src/templates/Post.vue
* ./PostMeta.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostMeta.vue
* ./PostTags.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostTags.vue
* ./Author.vue?vue&type=style&index=0&lang=scss& in ./src/components/Author.vue
* ./PostCard.vue?vue&type=style&index=0&lang=scss& in ./src/components/PostCard.vue

I don't think the routing is incorrect, but I'm unsure as to why this is occuring.

EDIT: A bit more investigation is showing that it's related to the SCSS tied to each element. Of course, if I remove it, GraphQL throws a fit, but at least I can narrow it down to that.

coffeepostal commented 5 years ago

I was having a similar issue, rebuilding node-sass seemed to help: npm rebuild node-sass