Question

Bootstrap正确加载但不加载自定义styles.css

注意Bootstrap和jQuery文件中的'../public'，但不是styles.css

这是index.html

<head>
  <!--bower:css-->
  <link rel="stylesheet" href="../public/lib/bootstrap/dist/css/bootstrap.css" />
  <!--endbower-->
  <!--bower:js-->
  <script src="../public/lib/jquery/dist/jquery.js"></script>
  <script src="../public/lib/bootstrap/dist/js/bootstrap.js"></script>
  <!--endbower-->
  <!-- inject:css -->   
  <link rel="stylesheet" href="/public/css/styles.css">
  <!-- endinject -->
  <!-- inject:js -->
  <script src="/public/js/app.js"></script>
  <!-- endinject -->
</head>

这是gulpfile.js

var gulp = require('gulp');

gulp.task('inject', function () {
  var wiredep = require('wiredep').stream;
  var inject = require('gulp-inject');

  var injectSrc = gulp.src(
      ['./public/css/*.css', './public/js/*.js'],
      { read: false }
  );

  var options = {
      bowerJson: require('./bower.json'),
      directory: './public/lib'
  };

  return gulp.src('./views/*.html')
            .pipe(wiredep(options))
            .pipe(inject(injectSrc))
            .pipe(gulp.dest('./views'));
});

以下是访问index.html

时出错的情况

GET file:///C:/public/css/styles.css net::ERR_FILE_NOT_FOUND
GET file:///C:/public/js/app.js net::ERR_FILE_NOT_FOUND

项目结构

- project
    - public
        - css
        - js
        - lib
     - views
     gulpfile.js
     etc..

Answer 1

/之前的斜杠public：

<link rel="stylesheet" href="/public/css/styles.css">
<script src="/public/js/app.js"></script>

应该删除，而不是="public/..写这个，除非你在本地运行时从驱动器的根目录获取路径。

Gulp没有向index.html添加正确的css / js路径

1 个答案: