用Sublime Text,Browser Sync浏览器同步之后,发现样式设置没有起作用,源文件也没加载出style.css
报错内容形如
Refused to apply style from 'http://localhost:3000/assets/styles/custom-style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.在Stack Overflow里找到一个类似的问题
里面提到了url是否正确,对Node.js应用程序检查配置,是否正确引用style.css等等
笔者目前遇到该问题的原因均为 路径不对,找不到对应CSS文件
修改前
<link rel="stylesheet" href="./style.css"> //文件结构 file |-static | |-style.css |_index.html修改后 根据原有文件结构,修改代码
<link rel="stylesheet" href="./static/style.css">就能正常加载了
注 ./表示当前目录,如上述代码,index.html中使用./,会找到file文件夹 ../表示父级目录,如上述代码,style.css中使用../,会找到file文件夹
使用 Express, 显示 HTML 文件,报错信息如下(还是同样的配方…)
Refused to apply style from 'http://localhost:8000/login/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.相关代码
//index.html <link rel="stylesheet" type="text/css" href="./index.css"> //app.js app.use(express.static(path.join(__dirname, '/'))); app.get('/', (req, res) => { console.log(1); res.sendFile(__dirname + '/pages/login/index.html'); }) //文件结构 demo ├─ app.js └─ pages └─ login ├─ index.css └─ index.html乍一眼是不是没觉得路径有问题,迷惑 但是这次出发点有问题,不能从 index.html文件出发来看问题,得从app.js这文件出发,因为是从它这导入的 正确写法
<link rel="stylesheet" type="text/css" href="./pages/login/index.css">完事儿!
时隔一年,又遇到了相同的报错,意外被推荐到了自己的博客 看自己写的第一篇报错记录文章,有点想吐槽(这傻逼写得什么玩意儿 屁用没有 哈哈哈哈) 故将文章补充修改了一下,希望对你有所帮助 :)