什么bootstrap-styl呢?

时间:2016-10-27 11:47:53

标签: javascript node.js twitter-bootstrap pug stylus

我使用express,bootstrap-styl,stylus,nib和pug / jade作为页面

我的服务器代码

var express=require('express')
var boostrap=require('bootstrap-styl')
var stylus=require('stylus')
var nib=require('nib')
var pug=require('pug')

var app=express()
app.use(express.static('public'));
app.use(stylus.middleware({
    src: 'public',
    compile: compile
}))
app.set('views', './views'); 
app.set('view engine', 'pug');

function compile(str,path){
    return stylus(str)
    .set('filename',path)
    .set('compress',true)
    .use([boostrap(),nib()])
}

app.get('/',function(req,res){
    //res.send('Hello Hola')
    res.render('index',{msg:'my message'})
})

app.listen(80)

我的玉码

doctype html5
html
    head
        link(rel='stylesheet',href='/style/style.css')
    body
        =msg
        input(type=text)
        button.btn.btn-warning(type='button') Click

我的按钮没有使用bootstrap设计,实际上是bootstrap-styl吗?

我的不好,我没有在style.styl

导入bootstrap
@import 'nib'
@import bootstrap
body
    background-color red

1 个答案:

答案 0 :(得分:-1)

尝试使用bootstrap-stylus而不是bootstrap-syl ......

    `var bootstrap = require('bootstrap-stylus'),
    stylus = require('stylus');

    function compile(str, path) {
    return stylus(str)
       .set('filename', path)
       .use(bootstrap());
    }

    app.use(stylus.middleware({
      src: __dirname + '/public',
      compile: compile
    }));`