在index.html中，我提到了应用样式的链接，并且我正在使用 Angular 6 的 primeng 模块。这里样式不适用，因此会出现如下错误...
\n\n由于 MIME 类型（ \ xe2\x80\x9ctext/html\xe2\x80\x9d) 不匹配（X-Content-Type-Options：nosniff）。
\n\n同样，我在 index.html 中提到的所有样式表都出现错误。
\n\n<!doctype html>\r\n<html lang="en">\r\n\r\n<head>\r\n <meta charset="utf-8">\r\n <title>Audit</title>\r\n <base href="/">\r\n\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n\r\n <meta charset="UTF-8">\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <!--===============================================================================================-->\r\n <link rel="icon" type="image/png" href="images/icons/favicon.ico" />\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">\r\n <!--===============================================================================================-->\r\n <link rel="stylesheet" type="text/css" href="css/util.css">\r\n <link rel="stylesheet" type="text/css" href="css/main.css">\r\n\r\n <link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />\r\n <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />\r\n <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />\r\n <!--===============================================================================================-->\r\n <meta http-equiv="content-type" content="text/html; charset=UTF-8">\r\n\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">\r\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>\r\n <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>\r\n\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\r\n\r\n <meta charset="utf-8">\r\n <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\r\n <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />\r\n <meta charset="utf-8">\r\n <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">\r\n\r\n <meta http-equiv="content-type" content="text/html; charset=UTF-8">\r\n\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">\r\n <!-- <link rel="stylesheet" type="text/css" href="/home/pearl/Downloads/DASHBOARD (1)/examples/css/style1.css" -->\r\n\r\n <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">\r\n <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\r\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>\r\n <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>\r\n <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>\r\n <style>\r\n .bs-example {\r\n margin: 20px;\r\n }\r\n </style>\r\n\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n\r\n <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">\r\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>\r\n <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>\r\n\r\n <meta name="generator" content="LibreOffice 6.1.3.2 (Linux)" />\r\n <meta name="author" content="ragaz" />\r\n <meta name="created" content="2015-08-28T16:56:54" />\r\n <meta name="changedby" content="ragaz" />\r\n <meta name="changed" content="2019-05-01T01:07:59" />\r\n <meta name="AppVersion" content="16.0300" />\r\n <meta name="Company" content="Smartsheet" />\r\n <meta name="DocSecurity" content="0" />\r\n <meta name="HyperlinksChanged" content="false" />\r\n <meta name="LinksUpToDate" content="false" />\r\n <meta name="ScaleCrop" content="false" />\r\n <meta name="ShareDoc" content="false" />\r\n\r\n <style type="text/css">\r\n body,\r\n div,\r\n table,\r\n thead,\r\n tbody,\r\n tfoot,\r\n tr,\r\n th,\r\n td,\r\n p {\r\n font-family: "Calibri";\r\n font-size: small\r\n }\r\n\r\n a.comment-indicator:hover+comment {\r\n background: #ffd;\r\n position: absolute;\r\n display: block;\r\n border: 1px solid black;\r\n padding: 0.5em;\r\n }\r\n\r\n a.comment-indicator {\r\n background: red;\r\n display: inline-block;\r\n border: 1px solid black;\r\n width: 0.5em;\r\n height: 0.5em;\r\n }\r\n\r\n comment {\r\n display: none;\r\n }\r\n </style>\r\n\r\n <meta charset="utf-8">\r\n\r\n <script src="https://cdn.zingchart.com/zingchart.min.js"></script>\r\n\r\n\r\n\r\n\r\n\r\n</head>\r\n\r\n<body>\r\n <app-root></app-root>\r\n</body>\r\n\r\n</html>我找到了休闲的解决方案
我们主要可以使用三个地方来放置样式表来执行所需的样式。
1)**index.html** by specifying <link rel="" type="", styelesheet="">
2)Global file **style.css** by importing or adding manually.
3)**component.html** in angular
所以在这里，我的侧primeng模块已安装，但样式无法应用。我只是在全局文件style.css中导入了所需的 css 文件。这拯救了我的一天..
@import "~primeicons/primeicons.css";
@import "~primeng/resources/themes/nova-light/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~font-awesome/css/font-awesome.css";
| 归档时间： |
|
| 查看次数： |
6705 次 |
| 最近记录： |