Home
Support Forums

Gulp/Sass: CSS not displaying when deploy Eleventy app

I have a site built with Eleventy that uses the Bulma CSS framework. I am using Gulp to transpile my Sass file to CSS.

The site works locally.

It deploys to Netlify without obvious build error, but the CSS is not working.

The site is: bugfix-bdcvs.netlify.app

The link to the build log is: Netlify App

The build settings are:

The repo is: https://github.com/corinnewelsh/bdcvs/tree/bugfix-sass-css-gulp-bulma

The CSS works when I link directly to the Bulma CDN (I have it running, from the Main branch of my repo, like that here: bdcvs.netlify.app).

I am new to Gulp and Sass. Thank you for your help.

Welcome to the forums @corinne

Your site has no stylesheet included. You have no build script in your package.json only a start script which is used for development purposes.

Change the scripts section of your package.json from

"scripts": {
  "start": "npx gulp && concurrently \"npx gulp watch\" \"npx eleventy --serve\""
},

to

"scripts": {
  "build": "gulp && eleventy",
  "start": "npx gulp && concurrently \"npx gulp watch\" \"npx eleventy --serve\""
},

and change your build command from eleventy to npm run build.

2 Likes

Thank you. I had a notion I was misunderstanding something at a fundamental level. So much to learn! :grinning:

2 Likes