I can serve my jekyll site locally but can't get it working on netlify

Question

I can run my jekyll site locally with the jekyll serve command and it works perfectly fine, but when I try to deploy it to netlify I get the following error:

Conversion error: Jekyll::Converters::Scss encountered an error while
converting 'assets/main.scss':
File to import not found or unreadable: bootstrap/scss/bootstrap. Load
paths: /opt/build/repo/_sass /opt/build/repo/node_modules
/opt/build/repo/_sass on line 6

I tried to comment out importing bootstrap from within my main.scss which is in my assets folder but it is not isolated to just bootstrap, anything in the node_modules folder I can't import.

I have tried to change the import code from:

@import "bootstrap/scss/bootstrap";

To the following options:

@import "/node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/bootstrap/scss/bootstrap";

But that hasn't worked

In my _config.yml I have the following configured:

sass:
    load_paths:
      - _sass
      - node_modules

Thanks for taking a look and appreciate the help!

With your config, @import "bootstrap/scss/bootstrap"; is the right include. Did you version node_modules ? If not, did you version a package.json file ? — David Jacquel
@DavidJacquel I believe it is the right include because it works locally with jekyll serve, I don't understand what you mean by version node_modules. I have a package.json but I don't reference any dependancies. Should I be doing so? — BACode

David Jacquel David Jacquel · Accepted Answer · 2018-12-28T16:39:38

Watching your config, I can say that @import "bootstrap/scss/bootstrap"; is the right include path.

One explanation to your problem can be that bootstrap is not present in you github repository, and that you're not referencing bootstrap in a package.json or yarn.lock versioned files.

Be sure to :

install and reference bootstrap as a dependency.

With yarn

yarn add bootstrap

or with npm

npm install bootstrap -P

version your package.json and, if you use yarn, your yarn.lock file.

Netlify will then automatically upload your dependencies before generating your Jekyll's site.

eg : I'm using Yarn that creates a yarl.lock file, that I'm versioning, just like my package.json.

In my Netlify deploy output I can see :

6:01:58 PM: Installing NPM modules using Yarn version 1.3.2
6:01:59 PM: yarn install v1.3.2
6:01:59 PM: [1/4] Resolving packages...
6:01:59 PM: [2/4] Fetching packages...
6:02:02 PM: [3/4] Linking dependencies...
6:02:03 PM: [4/4] Building fresh packages...
6:02:04 PM: Done in 4.39s.
6:02:04 PM: NPM modules installed using Yarn

I can serve my jekyll site locally but can't get it working on netlify

1 Answers