即使文件路径正确，也无法从bower_components加载资源

Question

I'm running into some frustrating 404 errors while working on a web project. I'm using this file structure for my CSS and JS files:

bower_components
    bootstrap
        |dist
            |css
               | bootstrap.min.css
    angular
        |angular.min.js
    jquery
        |dist
            |jquery.min.js
dist
lib
    |farbtastic.js
node_modules
src
    |img
    |styles
    |scripts
    |view1
    |view2
    |index.html //running browserSync from this folder using this file as index

When I try to reference files in index.html using the appropriate syntax:

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">

I get a 404 "Failed to load resource" error.

The ../ syntax appears to be correct, and my console shows that it's looking in the correct location in http://localhost:3000/bower_components/bootstrap/dist/css/bootstrap.min.css .

Is there something I'm not doing correctly?

Answer 1

The root directory of your application is the "src" folder. When you request bootstrap.min.css from "../bower_components/", you are telling the browser to go 1 level up. Because you are already at the root of the application, "../bower_component" is essentially doing the same as "bower_component".

You can:

1. move your index.html 1 level up
2. move your bower_components inside src
3. have some kind of build(gulp/grunt) to reorganize them in a way where the bower_components is within the root folder.

Answer 2

Since root directory of your application is src folder, you can still load from bower_components using the link

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">

configure you browserSync.init this way

browserSync.init({
        server: {
                baseDir :"src",
                routes:{
                    "/bower_components" : "bower_components"
                }
        }