使用CSS编译器加载CSS,但样式未在expess.js服务器上应用

时间:2018-10-15 20:02:10

标签: css node.js express sass

你好,

我为以下问题感到疯狂-乍一看-看起来像是MIME类型的问题或仅仅是拼写错误。但这在我看来有点奇怪:

我想做的是以下操作,但是首先我想注意到,这在任何生产服务器中都没有使用,因此请忽略目的地的因果关系。

我正在尝试在<head>

中将CSS文件与以下元素绑定
<link rel="stylesheet" href="/modules/css/main.css">

现在,我在我的express应用程序中定义了一条简单的路线,如下所示:

app.use('/modules/css/:file', (req, res) => {

    // Get the requestet scss file from the .css-file-request
    let reqFile = req.params.file.replace(/\.css$/, '.scss');

    // Render the sass-file using the 'node-sass'-package
    sass.render({
        file: './public/scss/' + reqFile,
        outputStyle: 'compressed'
    }, (err, result) => {
        if (err) {
            console.log(err);
            res.status(500);
            res.send(err);
            return;
        }

        // This is what I tried before, because I thaught
        // the problem hat something to do with MIME-types
        //res.type('text/css');

        // Sending the compiled css to the client
        res.send(result.css);
    });
});

整个路线如我所愿。它编译我的scss并将其发送到客户端。
到目前为止没有问题。

让我们以body { background: green; } scss为例,这就是我的浏览器:

body{background:green !important}

还是没问题。
除了页面的背景不是我预期的绿色。

因此,我仔细检查了控制台,以查看是否没有错误或MIME-Type警告。在查看我的Chrome控制台的Sources-Tab时,我格式化了main.css并突然将文件应用到该页面,背景变成绿色。

这是由Chrome中的错误引起的还是我犯了根本找不到的错误?

我先感谢您的帮助。 :)

0 个答案:

没有答案