资源解释为样式表，但使用 MIME 类型 text/x-scss 传输

Question

i want to create a website with nodejs but i have a problem with show style in scss and ejs .

i have a scss style in folder ../app/public/scss and i using this middlware for set static file with express:

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

and in header i define the style by this way:

<link rel="stylesheet" type="text/css" href="/scss/vazir.scss">
<link rel="stylesheet" type="text/css" href="/scss/media-queries.scss">
<link rel="stylesheet" type="text/css" href="/scss/style.scss">

and i using the header by this way in the register.ejs:

<%- include('./../header.ejs'); %>

Registration

but when i go to the register page it show me this in console:

Resource interpreted as Stylesheet but transferred with MIME type text/x-scss: " http://localhost:3000/scss/vazir.scss ".

register:9 Resource interpreted as Stylesheet but transferred with MIME type text/x-scss: " http://localhost:3000/scss/media-queries.scss ".

register:10 Resource interpreted as Stylesheet but transferred with MIME type text/x-scss: " http://localhost:3000/scss/style.scss ".

whats the problem? how can i sovle this problem????

Answer 1

Browsers don't support SCSS. You need to compile it to CSS and serve the CSS files to the browser.

There are various compilers that support it. SASS is the official one. You might want to find one that integrates with your existing build toolchain.