Menu icon Foundation
Sass compile not creating app.css

I created a new foundation basic project with Sass with what I think is the latest version 6.5.3. When I edit the scss/_settings.scss file and try to save it I get an error:

"Sass could not be completed. /Volumes/Macintosh HD/Users/jay/Dropbox/Websites/cdndelivery/scss/app.scss:3: file to import not found or unreadable: foundation

Current dir: /Volumes/Macintosh HD/Users/jay/Dropbox/Websites/cdndelivery/scss/"

 

I also got this output in Mac terminal when I first typed in "foundation watch" while in the project directory before I edited the _settings.scss file.

 

Jays-Mac-Pro:cdndelivery jay$ foundation watch

 

> [email protected] start /Users/jay/Dropbox/Websites/cdndelivery

> gulp

 

[17:37:28] Using gulpfile ~/Dropbox/Websites/cdndelivery/gulpfile.js

[17:37:28] Starting 'default'...

[17:37:28] Starting 'sass'...

 

  Replace Autoprefixer browsers option to Browserslist config.

  Use browserslist key in package.json or .browserslistrc file.

 

  Using browsers option cause some error. Browserslist config 

  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

 

  If you really need to use option, rename it to overrideBrowserslist.

 

  Learn more at:

  https://github.com/browserslist/browserslist#readme

  https://twitter.com/browserslist

 

 

[17:37:29] Finished 'sass' after 998 ms

[17:37:29] Starting 'serve'...

[Browsersync] Access URLs:

 ----------------------------------

       Local: http://localhost:3000

    External: http://10.0.1.36:3000

 ----------------------------------

          UI: http://localhost:3001

 UI External: http://localhost:3001

 ----------------------------------

[Browsersync] Serving files from: ./

 

[Browsersync] Reloading Browsers...

I don't understand what I am supposed to change regarding these items:

Replace Autoprefixer browsers option to Browserslist config.

 

Use browserslist key in package.json or .browserslistrc file.

 

Can someone explain what I need to do so I can edit the _settings.scss and all other _.scss files in the scss directory and hopefully have it create the updated app.css file in my /css folder?

 

Thank you.

 

 

 

 

Sasscompile

I created a new foundation basic project with Sass with what I think is the latest version 6.5.3. When I edit the scss/_settings.scss file and try to save it I get an error:

"Sass could not be completed. /Volumes/Macintosh HD/Users/jay/Dropbox/Websites/cdndelivery/scss/app.scss:3: file to import not found or unreadable: foundation

Current dir: /Volumes/Macintosh HD/Users/jay/Dropbox/Websites/cdndelivery/scss/"

 

I also got this output in Mac terminal when I first typed in "foundation watch" while in the project directory before I edited the _settings.scss file.

 

Jays-Mac-Pro:cdndelivery jay$ foundation watch

 

> [email protected] start /Users/jay/Dropbox/Websites/cdndelivery

> gulp

 

[17:37:28] Using gulpfile ~/Dropbox/Websites/cdndelivery/gulpfile.js

[17:37:28] Starting 'default'...

[17:37:28] Starting 'sass'...

 

  Replace Autoprefixer browsers option to Browserslist config.

  Use browserslist key in package.json or .browserslistrc file.

 

  Using browsers option cause some error. Browserslist config 

  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

 

  If you really need to use option, rename it to overrideBrowserslist.

 

  Learn more at:

  https://github.com/browserslist/browserslist#readme

  https://twitter.com/browserslist

 

 

[17:37:29] Finished 'sass' after 998 ms

[17:37:29] Starting 'serve'...

[Browsersync] Access URLs:

 ----------------------------------

       Local: http://localhost:3000

    External: http://10.0.1.36:3000

 ----------------------------------

          UI: http://localhost:3001

 UI External: http://localhost:3001

 ----------------------------------

[Browsersync] Serving files from: ./

 

[Browsersync] Reloading Browsers...

I don't understand what I am supposed to change regarding these items:

Replace Autoprefixer browsers option to Browserslist config.

 

Use browserslist key in package.json or .browserslistrc file.

 

Can someone explain what I need to do so I can edit the _settings.scss and all other _.scss files in the scss directory and hopefully have it create the updated app.css file in my /css folder?

 

Thank you.

 

 

 

 

Jay Todtenbier 4 months ago

I tried to start over by exiting Mac Terminal. Reopened, changed to my project directory, then typed in foundation watch and am now getting a new error message:

Jays-Mac-Pro:cdndelivery jay$ foundation watch

 

> [email protected] start /Users/jay/Dropbox/Websites/cdndelivery

> gulp

 

module.js:549

    throw err;

    ^

 

Error: Cannot find module 'gulp-cli'

    at Function.Module._resolveFilename (module.js:547:15)

    at Function.Module._load (module.js:474:25)

    at Module.require (module.js:596:17)

    at require (internal/module.js:11:18)

    at Object.<anonymous> (/Users/jay/Dropbox/Websites/cdndelivery/node_modules/.bin/gulp:3:1)

    at Module._compile (module.js:652:30)

    at Object.Module._extensions..js (module.js:663:10)

    at Module.load (module.js:565:32)

    at tryModuleLoad (module.js:505:12)

    at Function.Module._load (module.js:497:3)

Error: [email protected] start: `gulp`

Exit status 1

    at EventEmitter.<anonymous> (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/lifecycle.js:217:16)

    at emitTwo (events.js:126:13)

    at EventEmitter.emit (events.js:214:7)

    at ChildProcess.<anonymous> (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/spawn.js:24:14)

    at emitTwo (events.js:126:13)

    at ChildProcess.emit (events.js:214:7)

    at maybeClose (internal/child_process.js:925:16)

    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

 

Jays-Mac-Pro:cdndelivery jay$ 

 

I get the same error message if I try npm start.

 

I've made several attempts to get this working and hope to get to work soon on my new project. Can I hire someone to do a screenshare over the phone with me and get the latest version of Foundation with Sass installed correctly on my Mac? I'm using macOS 10.14.5 and Coda 2.7.3 as my code editor.