Node.js expressjs 4提供CSS文件，其中包含HTML，而不是预期的CSS_Node.js_Express_Sass_Gruntjs_Pug

Node.js expressjs 4提供CSS文件，其中包含HTML，而不是预期的CSS

node.js express sass gruntjs

Node.js expressjs 4提供CSS文件，其中包含HTML，而不是预期的CSS,node.js,express,sass,gruntjs,pug,Node.js,Express,Sass,Gruntjs,Pug,Express 4提供的是style.css文件，但不是grunt sass正在编译的public/stylesheets/style.css。奇怪的是，提供的style.css文件包含从app/views/index.jade文件生成的压缩HTML代码。你知道这里发生了什么吗我的项目信息和文件我的app/views/index.jade doctype html html head link(href="/favicon.ico", rel="shortcut icon",

Express 4提供的是

style.css

文件，但不是grunt sass正在编译的

public/stylesheets/style.css

。奇怪的是，提供的

style.css

文件包含从

app/views/index.jade

文件生成的压缩HTML代码。你知道这里发生了什么吗

我的项目信息和文件

我的

app/views/index.jade

doctype html

html
  head
    link(href="/favicon.ico", rel="shortcut icon", type="image/x-icon")
    link(rel="stylesheet", href="/public/stylesheets/style.css")
  body
    h1 Hello World
    script(src='http://localhost:35729/livereload.js')

我的

scss/style.scss

h1 { color : red; }

运行

grunt

时生成的my

public/stylesheets/style.css

。这就是我的

scss/style，scss

被正确编译的证据

h1{color:red;}

server.js

var express = require('express'),
    path = require('path');

var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var app = express();

app.set('views', path.join(__dirname, '/app/views'));
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));

// make sure to coordinate client side and server side routes
app.get('*', function(req, res) {
  res.render('index');
});

var port = 3030;
app.listen(port);
console.log('Listening on port ' + port + '...');

我的

grunfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'), 

    sass: {
      options: {
        includePaths: ['public/vendor/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'public/stylesheets/style.css' : 'scss/style.scss'
        }
      }
    },

    watch: {
      source: {
        files: ['scss/**/*.scss', 'Gruntfile.js'],
        tasks: ['sass'],
        options: {
          livereload: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['sass','watch']);
}

package.json

{ “名称”：“我的项目”， “私人”：没错， “脚本”：{ “开始”：“nodemon server.js” }, “依赖项”：{ “翡翠”：“， “mongodb”：“， “和尚”：“*”， “减去”：“^1.7.0”， “快速”：“^4.1.2” }, “依赖性”：{ “咕噜声”：“^0.4.4”， “grunt sass”：“^0.12.1”， “grunt contrib手表”：“^0.6.1”，节点sass:“^0.8.6” } }

我的项目树

.
├── app
│   └── views
│       └── index.jade
├── bower.json
├── class3s.js
├── Gruntfile.js
├── node_modules
│   ├── express
│   ├── grunt
│   ├── grunt-contrib-watch
│   ├── grunt-sass
│   ├── jade
│   ├── mongodb
│   ├── monk
│   ├── node-sass
│   └── npm-debug.log
├── old-server.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   ├── stylesheets
│   └── vendor
├── README.md
├── routes
│   ├── index.js
│   └── user.js
├── scss
│   ├── _settings.scss
│   └── style.scss
└── server.js

chromium在开发人员工具中向我展示的

style.css

全文如下：

<!DOCTYPE html><html><head><link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"><link rel="stylesheet" href="/public/stylesheets/style.css"></head><body><h1>Hello World</h1><script src="http://localhost:35729/livereload.js"></script></body></html>

你好，世界

尝试更改：

链接（rel=“stylesheet”，href=“/public/stylesheets/style.css”）

致：

链接（rel=“stylesheet”，href=“/stylesheets/style.css”）

执行

express.static（\uuuu dirname+'/public'）

时，将

\uuuu dirname+'/public'

设置为根web路径（

）的位置。因此，对

/stylesheets/style.css

的请求将在文件系统中作为

\uu dirname+'/public/stylesheets/style.css'

进行查找

如果没有上述更改，静态中间件将查找

\uu dirname+'/public/public/stylesheets/style.css'

，并失败，因此它将继续执行下一个中间件或路由，这就是为css呈现index.jade的方式。

感谢您修复了它。你知道为什么所提供的style.css文件包含index.jade生成的HTML吗？正如答案中所指出的：在没有上述更改的情况下，静态中间件查找

\uu dirname+'/public/public/stylesheets/style.css'

并失败，因此它继续下一个中间件或路由，这就是你的index.jade为css呈现的方式。是的，我明白了。有时我太情绪化了，急匆匆地回答问题。我会更加注意这一点。再次感谢。