Gatsby: [gatsby-plugin-sass] 'gatsby develop' failing to compile scss

[sambaines]

Description

I have set up two new repos for gatsby sites and I am experiencing the same issue on both. I install gatsby-plugin-sass as suggested in the V2 docs, but when I try to run gatsby develop after setting up a *.scss or *.module.scss file and import it into a page component, then gatsby develop fails to compile and run the dev server.

Now at first I thought is was something I was doing wrong or that the starter I used was not set-up correctly but I have done this on both gatsby-starter-default#v2 and gatsby-starter-hello-world#v2.

I feel like this might be a webpack issue - maybe to do with the change between v1 and v2?

Steps to reproduce

run gatsby new gatsby-example-site https://github.com/gatsbyjs/gatsby-starter-default
then yarn add node-sass gatsby-plugin-sass
add the plugin to gatsby-config.js as in docs
change 'layout.css' name to 'layout.scss'
change the import in components/layout.js for the styles to reflect .scss change
run gatsby develop

Expected result

Development server should run and load the site on localhost:8000

Actual result

ERROR  Failed to compile with 1 errors                                                                                                                                                                                        19:33:49
 error  in ./src/components/layout.scss

Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
> html {
|   font-family: sans-serif;
|   -ms-text-size-adjust: 100%;

 @ ./src/components/layout.js 14:0-23
 @ ./src/pages/index.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false C://Users//Sam//Creative Cloud Files//_Clients//Hona Workshop//master-site//.cache//app

Environment

$ gatsby info --clipboard <-- this is after running npm install -g gatsby-cli

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz
  Binaries:
    Yarn: 1.9.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 5.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: next => 2.0.0-beta.67
    gatsby-cli: ^1.1.58 => 1.1.58
    gatsby-plugin-manifest: next => 2.0.2-beta.3
    gatsby-plugin-offline: next => 2.0.0-beta.6
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4
    gatsby-plugin-sass: ^1.0.26 => 1.0.26

error The system cannot find the path specified.

  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778

  - envinfo.js:1 Object.copySync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:104976

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:123499

  - envinfo.js:1
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124274

  - envinfo.js:1 Promise.all.then.e
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124289

  - util.js:16 tryCatcher
    [npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:693:18

  - promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  - promise_array.js:126 PromiseArray._resolve
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:126:19

  - promise_array.js:144 PromiseArray._promiseFulfilled
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:144:14

  - promise.js:574 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:574:26

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:693:18

error UNHANDLED REJECTION

  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778

  - envinfo.js:1 Object.copySync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:104976

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:123499

  - envinfo.js:1
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124274

  - envinfo.js:1 Promise.all.then.e
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124289

  - util.js:16 tryCatcher
    [npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:693:18

  - promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  - promise_array.js:126 PromiseArray._resolve
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:126:19

  - promise_array.js:144 PromiseArray._promiseFulfilled
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:144:14

  - promise.js:574 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:574:26

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:693 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:693:18

File contents (if changed)

module.exports = { siteMetadata: { title: 'Gatsby Default Starter', }, plugins: [ 'gatsby-plugin-react-helmet', { resolve:gatsby-plugin-manifest, options: { name: 'gatsby-starter-default', short_name: 'starter', start_url: '/', background_color: '#663399', theme_color: '#663399', display: 'minimal-ui', icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site. }, }, 'gatsby-plugin-offline', 'gatsby-plugin-sass', ], }
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[anantoghosh]

You need to install v2 plugins with gatsby 2
install gatsby-plugin-sass@next. same for gatsby-cli
For v2, all _official_ plugins should be installed with @next tag

[sambaines]

Thanks for the reply! That is not clear at all in the docs to use the @next - I presume doing it for gatsby-cli@next will make it Gatsby V2 when I set up the initial gatsby new command?

[anantoghosh]

just using gatsby new currently will clone the v1 repo
v2 repo can be cloned by gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default#v2

[sambaines]

Thanks for your help, using the @next tag worked! I believe I already was using the #v2 branch for the starters so guess it must be Gatsby V2 I was installing.