search

planetoftheweb / sassbootstrap

A repository for a course on using bootstrap with sass
MIT License
20 stars 27 forks source link

Unable to load the css #1

Closed lunawen closed 4 years ago

lunawen commented 4 years ago

Hi Ray, Thanks for creating all the awesome courses, I'm a big fan of your courses! Today I started the bootstrap 4 with Sass course, but I am unable to see the styles properly on my localhost. image And this is the error message from console. image Is there anyway to fix this issue?

Regards, Luna

planetoftheweb commented 4 years ago

I’m not really clear where you are in the course. All of the code is available at Github. https://github.com/planetoftheweb/sassbootstrap

That type of error is usually because of an bad reference check how the path to the file is specified. You might want to search the web to see an example. https://stackoverflow.com/questions/55882824/mime-type-text-html-is-not-a-supported-stylesheet

From: "Xin Wen (Luna)" notifications@github.com Reply-To: planetoftheweb/sassbootstrap reply@reply.github.com Date: Tuesday, January 7, 2020 at 2:35 AM To: planetoftheweb/sassbootstrap sassbootstrap@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Subject: [planetoftheweb/sassbootstrap] Unable to load the css (#1)

Hi Ray, Thanks for creating all the awesome courses, I'm a big fan of your courses! Today I started the bootstrap 4 with Sass course, but I am unable to see the styles properly on my localhost. [image]https://user-images.githubusercontent.com/34984218/71877062-5df0f680-317c-11ea-9c57-df5667a802f3.png And this is the error message from console. [image]https://user-images.githubusercontent.com/34984218/71877087-6fd29980-317c-11ea-9607-6842b01a5642.png Is there anyway to fix this issue?

Regards, Luna

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/planetoftheweb/sassbootstrap/issues/1?email_source=notifications&email_token=AABU22RWNWW7FAGRXDDXJBDQ4QWEDA5CNFSM4KDTW3T2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4IENIQOQ, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AABU22TLL6LAQIQIC4WL7OLQ4QWEDANCNFSM4KDTW3TQ.

GemKosan commented 4 years ago

Hi Ray,

I'm getting the same error as @lunawen. I'm on 01_03b, and no style.css is being generated in the /dist/css folder. So all I see is the Seven HTML without styling.

I tried the same process with branch 04_04e and got the same results.

The steps I followed are listed below. Did I miss a configuration step somewhere?

  1. Navigate to https://github.com/planetoftheweb/sassbootstrap.
  2. Change branch to sassbootstrap-01_03b.
  3. Download as a zip, unpack, & copy sassbootstrap-01_03b folder to my Mac Desktop.
  4. In VS Code terminal, cd to that directory.
  5. npm install
  6. npm start

results:

Gems-MacBook-Pro:sassbootstrap-01_03b gkosan$ npm install
npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.

audited 17313 packages in 4.627s
found 985 vulnerabilities (614 low, 6 moderate, 364 high, 1 critical)
  run npm audit fix to fix them, or npm audit for details
Gems-MacBook-Pro:sassbootstrap-01_03b gkosan$ npm start

> seventy@1.0.3 start /Users/gkosan/Desktop/lynda/sassbootstrap-01_03b
> npm-run-all --parallel dev:del dev:webpack dev:sass-dev dev:eleventy

> seventy@1.0.3 dev:webpack /Users/gkosan/Desktop/lynda/sassbootstrap-01_03b
> webpack --watch

> seventy@1.0.3 dev:sass-dev /Users/gkosan/Desktop/lynda/sassbootstrap-01_03b
> node-sass --watch _process/scss/style.scss --output-style expanded --source-map true --output _site/css

> seventy@1.0.3 dev:del /Users/gkosan/Desktop/lynda/sassbootstrap-01_03b
> rimraf dist

> seventy@1.0.3 dev:eleventy /Users/gkosan/Desktop/lynda/sassbootstrap-01_03b
> eleventy --serve --quiet

webpack is watching the files…

Hash: 2f95923880f6a8b52217
Version: webpack 4.29.3
Time: 1231ms
Built at: 04/01/2020 3:00:49 PM
    Asset      Size  Chunks             Chunk Names
script.js  1.95 MiB    main  [emitted]  main
Entrypoint main = script.js
[0] multi ./_process/js/app.js ./_process/js/script.js 40 bytes {main} [built]
[./_process/js/App.vue] 1.17 KiB {main} [built]
[./_process/js/App.vue?vue&type=script&lang=js&] 254 bytes {main} [built]
[./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css&] 606 bytes {main} [built]
[./_process/js/App.vue?vue&type=template&id=8a6f8048&scoped=true&] 213 bytes {main} [built]
[./_process/js/app.js] 108 bytes {main} [built]
[./_process/js/script.js] 19 bytes {main} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css&] ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css& 299 bytes {main} [built]
[./node_modules/style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css&] ./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css& 1.59 KiB {main} [built]
[./node_modules/vue-loader/lib/index.js?!./_process/js/App.vue?vue&type=script&lang=js&] ./node_modules/vue-loader/lib??vue-loader-options!./_process/js/App.vue?vue&type=script&lang=js& 870 bytes {main} [built]
[./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./_process/js/App.vue?vue&type=template&id=8a6f8048&scoped=true&] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./_process/js/App.vue?vue&type=template&id=8a6f8048&scoped=true& 3.84 KiB {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
    + 11 hidden modules
Copied 3 items and Processed 158 files in 1.60 seconds (10.1ms each)
Watching…
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:8080
    External: http://192.168.0.13:8080
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: dist
planetoftheweb commented 4 years ago

I usually do the npm install on the master branch. Try doing that. A lot of times, I work through installation in courses and the individual branches, specially the early ones might not have the problem.

GemKosan commented 4 years ago

Thanks for the quick response! When I need to pull in another branch, should I then download and copy the folder contents, overwriting the previous branch?

planetoftheweb commented 4 years ago

You can just switch to the other branch. If you have done some work, you can do a $git stash and that will save what you've done. There's a good course that shows you a bit of the process. https://www.linkedin.com/learning/learning-git-and-github/welcome?u=104

dmkerr commented 4 years ago

Hi Ray,

I'm also having this issue. Perhaps @lunawen or @GemKosan can report if they found a workaround?

index.html has a reference to /css/style.css which doesn't exist. (yet?)

I was able to get the site to work with the master branch but not the starter branch 01_02b.

Thanks for all your great courses.

GemKosan commented 4 years ago

I still can't get past the missing style.css. dist.css only contains the prism folder and its contents. Here's what I did.

Terminal 1

Gems-MacBook-Pro:lynda gkosan$ pwd
/Users/gkosan/Desktop/lynda
Gems-MacBook-Pro:lynda gkosan$ ls sassbootstrap
ls: sassbootstrap: No such file or directory
Gems-MacBook-Pro:lynda gkosan$ git clone https://github.com/planetoftheweb/sassb
ootstrap.git
Cloning into 'sassbootstrap'...
remote: Enumerating objects: 502, done.
remote: Total 502 (delta 0), reused 0 (delta 0), pack-reused 502
Receiving objects: 100% (502/502), 21.84 MiB | 19.38 MiB/s, done.
Resolving deltas: 100% (125/125), done.
Gems-MacBook-Pro:lynda gkosan$ git branch
fatal: not a git repository (or any of the parent directories): .git
Gems-MacBook-Pro:lynda gkosan$ cd sassbootstrap/
Gems-MacBook-Pro:sassbootstrap gkosan$ git branch
* master
Gems-MacBook-Pro:sassbootstrap gkosan$ npm install

> fsevents@1.2.4 install /Users/gkosan/Desktop/lynda/sassbootstrap/node_modules/fsevents
> node install

[fsevents] Success: "/Users/gkosan/Desktop/lynda/sassbootstrap/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> node-sass@4.11.0 install /Users/gkosan/Desktop/lynda/sassbootstrap/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/gkosan/.npm/node-sass/4.11.0/darwin-x64-64_binding.node

> node-sass@4.11.0 postinstall /Users/gkosan/Desktop/lynda/sassbootstrap/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/gkosan/Desktop/lynda/sassbootstrap/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
added 1143 packages from 664 contributors and audited 17313 packages in 13.026s
found 985 vulnerabilities (614 low, 6 moderate, 364 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
Gems-MacBook-Pro:sassbootstrap gkosan$ git branch
* master
Gems-MacBook-Pro:sassbootstrap gkosan$ git checkout 01_03b
M       package-lock.json
Branch '01_03b' set up to track remote branch '01_03b' from 'origin'.
Switched to a new branch '01_03b'
Gems-MacBook-Pro:sassbootstrap gkosan$ npm start

> seventy@1.0.3 start /Users/gkosan/Desktop/lynda/sassbootstrap
> npm-run-all --parallel dev:del dev:webpack dev:sass-dev dev:eleventy

> seventy@1.0.3 dev:eleventy /Users/gkosan/Desktop/lynda/sassbootstrap
> eleventy --serve --quiet

> seventy@1.0.3 dev:del /Users/gkosan/Desktop/lynda/sassbootstrap
> rimraf dist

> seventy@1.0.3 dev:webpack /Users/gkosan/Desktop/lynda/sassbootstrap
> webpack --watch

> seventy@1.0.3 dev:sass-dev /Users/gkosan/Desktop/lynda/sassbootstrap
> node-sass --watch _process/scss/style.scss --output-style expanded --source-map true --output _site/css

webpack is watching the files…

Hash: e191408980ff6cf7f33c
Version: webpack 4.29.3
Time: 1423ms
Built at: 04/05/2020 10:42:26 PM
    Asset      Size  Chunks             Chunk Names
script.js  1.95 MiB    main  [emitted]  main
Entrypoint main = script.js
[0] multi ./_process/js/app.js ./_process/js/script.js 40 bytes {main} [built]
[./_process/js/App.vue] 1.16 KiB {main} [built]
[./_process/js/App.vue?vue&type=script&lang=js&] 254 bytes {main} [built]
[./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css&] 606 bytes {main} [built]
[./_process/js/App.vue?vue&type=template&id=8a6f8048&scoped=true&] 213 bytes {main} [built]
[./_process/js/app.js] 108 bytes {main} [built]
[./_process/js/script.js] 19 bytes {main} [built]
[./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css&] ./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css& 299 bytes {main} [built]
[./node_modules/style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib/index.js?!./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css&] ./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/vue-loader/lib??vue-loader-options!./_process/js/App.vue?vue&type=style&index=0&id=8a6f8048&scoped=true&lang=css& 1.59 KiB {main} [built]
[./node_modules/vue-loader/lib/index.js?!./_process/js/App.vue?vue&type=script&lang=js&] ./node_modules/vue-loader/lib??vue-loader-options!./_process/js/App.vue?vue&type=script&lang=js& 870 bytes {main} [built]
[./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./_process/js/App.vue?vue&type=template&id=8a6f8048&scoped=true&] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./_process/js/App.vue?vue&type=template&id=8a6f8048&scoped=true& 3.84 KiB {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
    + 11 hidden modules
Copied 3 items and Processed 158 files in 1.88 seconds (11.9ms each)
Watching…
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:8080
    External: http://192.168.0.13:8080
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: dist

Terminal 2

Gems-MacBook-Pro:sassbootstrap gkosan$ pwd
/Users/gkosan/Desktop/lynda/sassbootstrap
Gems-MacBook-Pro:sassbootstrap gkosan$ ls dist/
404.html     courses/     feed/        index.html   posts/       tags/
about/       css/         images/      js/          sitemap.xml  
Gems-MacBook-Pro:sassbootstrap gkosan$ ls dist/css
prism
Gems-MacBook-Pro:sassbootstrap gkosan$ ls dist/css/prism/
prism-a11y-dark.css
prism-atom-dark.css
prism-base16-ateliersulphurpool.light.css
prism-cb.css
prism-darcula.css
prism-duotone-dark.css
prism-duotone-earth.css
prism-duotone-forest.css
prism-duotone-light.css
prism-duotone-sea.css
prism-duotone-space.css
prism-ghcolors.css
prism-hopscotch.css
prism-pojoaque.css
prism-vs.css
prism-xonokai.css
Gems-MacBook-Pro:sassbootstrap gkosan$
GemKosan commented 4 years ago

FWIW, 01_01 using Parcel worked fine, and the styling changed when I replaced text-primary with text-secondary.

jennilyne77 commented 4 years ago

Good afternoon Ray!

I seem to be getting the same problem that @GemKosan, @dmkerr and @lunawen are getting. I can get the local server started, but for some reason I'm not getting any styling to the code. The source code references a style.css file that doesn't seem to exist.

Here are the steps that I used:

  1. Launch VS Code, open terminal (using Bash)
  2. Use $ cd ~/Desktop to navigate to desktop
  3. Use $ mkdir SassBootstrapBlog to create a new directory folder called SassBootstrapBlog
  4. Navigate to new folder with $ cd SassBootstrapBlog
  5. Run $ git clone https://github.com/planetoftheweb/sassbootstrap.git to download the project files and branches
  6. Navigate to new folder that contains the project files with $ cd sassbootstrap When I get there, it shows me that it is at the (master) position.
  7. Run $ npm install to install all of the project dependencies
  8. For some reason (not sure why) I have to run $ npm install --save-dev node-sass separately because the npm install wouldn't seem to install it.
  9. Once I've done all this, I can run $ npm start and get the option for a local host server. When I click on the link, I get the same thing that the other users are getting (shows the site, but no style.css file seems to be attached). Issue_img1

When I inspect page source, the source code says it is pointing at a style.css file. Issue_img2

But when i look through my directory, I'm not seeing one in the location that is being referenced.

I've tried running $ npm start for the master and also for different branches of the project (like 02_01b) - and I get the same result no matter if I'm on the master or a different branch of the project.

Here is what is output in the terminal when I run $npm start for MASTER

Terminal_master

If I switch to a different branch of the project (using $ git stash && git checkout 02_01b), and attempt to run $ npm start, here is what it shows in the terminal.

Terminal_branch_02_01b

Not sure if this information helps or not. Going to try and continue to troubleshoot it! Any suggestions or advice about what I might have done wrong would be greatly appreciated!

jennilyne77 commented 4 years ago

UPDATE! After talking with some developer friends, we were able to get it working.

For some reason when the $npm start command runs, it doesn't seem to build the style.css file initially (which is why it can't be found when you open up the local host link - it just isn't there). Not sure WHY it is not building it (I'm just getting started with development stuff, so this is all new to me). 2020-04-11_1735

ANYWAY! To resolve this, after you've run $npm start command (I ran it on the MASTER part of the project instead of branches), if you will go to the process --> scss --> style.scss file and make a small change (I just added a few extra lines of blank space) - and save that file, the browsersync function picks up on the change in the style.scss file and will actually initiate the building of the file then. Rebuild

Once the file gets built, the localhost page refreshes and now has the template css applied. 2020-04-11_1738

It looks like you only have to do this when you first set up the project file. I can navigate to other branches of the project now using $ git stash && git checkout ##_## (where ##_## is a branch name like 02_01b) and run $ npm startand it loads all branches with the style in place.

I hope this information helps others that were having the issue (sorry if any of my information is unclear or not stated correctly - just getting into the dev world!).

planetoftheweb commented 4 years ago

Hello there. I'm going to close this issue. It was puzzling me that it wouldn't work for some people and until I saw the great post from @ jennilyne77 I didn't know what the problem could be. Yes, in my courses it's always a good idea to do the npm install on the MASTER branch. That branch usually contains what the project looks like at the end of the course.

That means that if I do any installations, they will all be there. 2 suggestions.

  1. Make sure you watch the video on Using the Exercises for this course.
  2. Watch this course. https://www.linkedin.com/learning/learning-git-and-github/welcome?u=104

Which shows you how to work with this type of project in Github. Specially chapter 2. Cheers everyone.

planetoftheweb commented 4 years ago

I've updated the repo so the master branch has the latest versions of everything and things seem to be working at least for me.