MIME 유형으로 인해 스타일 시트가로드되지 않았습니다.
gulp브라우저를 변경 사항과 동기화하기 위해 컴파일 및 브라우저 동기화에 사용하는 웹 사이트에서 작업하고 있습니다 .
gulp 작업은 모든 것을 올바르게 컴파일하지만 웹 사이트에서 스타일을 볼 수 없으며 콘솔에 다음 오류 메시지가 표시됩니다.
MIME 유형 ( 'text / html')이 지원되는 스타일 시트 MIME 유형이 아니기 때문에 ' http : // localhost : 3000 / assets / styles / custom-style.css ' 에서 스타일을 적용하기 위해 거부 되었으며 엄격한 MIME 검사가 활성화되었습니다.
이제 왜 이런 일이 발생하는지 이해하지 못합니다.
HTML에는 다음과 같은 파일이 포함되어 있습니다 (확실히 맞습니다).
<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>
그리고 스타일 시트는 현재 부트 스트랩과 글꼴이 멋진 스타일을 결합한 것입니다 (아무도 사용자 정의 없음).
폴더 구조이므로 경로도 정확합니다.
index.html
assets
|-styles
|-custom-style.css
하지만 계속 오류가 발생합니다.
뭐가 될수 있었는지? gulp / browsersync에 대한 설정입니까?
문제는 주석으로 시작하는 CSS 라이브러리와 관련이 있다고 생각합니다.
개발 중에는 파일을 축소하지 않으며 주석을 제거하지 않습니다. 이는 스타일 시트가 일부 주석으로 시작하여 CSS와 다른 것으로 표시됨을 의미했습니다.
라이브러리를 제거하고 공급 업체 파일 (주석없이 항상 축소)에 넣으면 문제가 해결되었습니다.
다시 한 번, 이것이 100 % 확실하지는 않지만 지금 예상대로 작동하므로 여전히 승리입니다.
Node.js 애플리케이션의 경우 구성을 확인하십시오.
app.use(express.static(__dirname + '/public'));
공지 사항 /public당신이 당신의 HTML의 당신의 HREF 옵션에 포함해야합니다, 그래서 마지막에 슬래시가 없습니다 :
href="/css/style.css">
슬래시 ( /public/)를 포함 시켰다면 그냥 할 수 있습니다 href="css/style.css".
CSS 파일을 제대로 참조하지 않으면이 오류가 발생할 수 있습니다.
예를 들어 링크 태그가
<link rel="stylesheet" href="styles.css">
그러나 CSS 파일의 이름이 style.css(두 번째없이 ) 지정된 경우이 오류가 발생할 가능성이 높습니다.
Angular 구조에 따라 style.css 파일 바로 아래 / 위에 폴더를 만들고 같은 링크를 제공하십시오 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.
대부분의 경우 이는 단순히 CSS 파일 경로가 잘못되었을 수 있습니다. 따라서 웹 서버는 status: 404일부 유형의 Not Found컨텐츠 페이로드를 반환 html합니다.
브라우저는 <link rel="stylesheet" ...>CSS 스타일을 적용 할 목적으로 태그 에서이 잘못된 경로를 따릅니다 . 그러나 리턴 된 컨텐츠 유형이 모순되어 오류를 기록합니다.
부트 스트랩 템플릿에 대해이 오류가 발생했습니다.
<link href="starter-template.css" rel="stylesheet">
그런 다음 rel="stylesheet"링크에서를 제거했습니다 .
<link href="starter-template.css">
그리고 모든 것이 잘 작동합니다. 부트 스트랩 템플릿을 사용하는 경우이 방법을 시도하십시오.
'href'-> 'src'를 변경했습니다. 그래서 이것으로부터 :
<link rel="stylesheet" href="dist/photoswipe.css">
이에:
<link rel="stylesheet" src="dist/photoswipe.css">
효과가있었습니다. 왜 그런지 모르겠지만 일이 끝났습니다.
angular.json의 Angular 6 빌드 구성 의 스타일 섹션 에서 CSS 파일 (필자의 경우 Angular 테마)을 간단히 참조했습니다 .
이것은 질문에 대한 답은 아니지만 나에게 적합한 해결책 일 수 있습니다.
파일의 주석이 트립됩니다. 일부 축소 기는 주석을 제거하지 않습니다.
또한
Node.js 를 사용 하고 다음 express과 같이 정적 파일을 설정 하는 경우 :
app.use(express.static(__dirname + '/public'));
파일을 올바르게 처리해야합니다.
제 경우에는 둘 다 문제 였으므로 CSS 링크 앞에 "/css/styles.css"를 붙였습니다.
예:
<link type="text/css" rel="stylesheet" href='/css/styles.css">
이 솔루션은 CSS가 렌더링되지 않는 주요 문제이므로 경로가 완벽합니다.
이 게시물에서 언급 한 솔루션에서 일부 솔루션이 효과가 있었지만 CSS는 페이지에 적용되지 않았습니다.
간단히, "css"디렉토리를 "Assest /"디렉토리로 옮기면 모든 것이 제대로 작동합니다.
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
Angular-CLI를 사용하고 웹 서버의 하위 폴더에 게시하는 다른 사람들도이 답변을 확인하십시오.
도메인 내에서 루트가 아닌 경로에 배포하는 경우 <base href="/">태그 를 수동으로 업데이트해야 합니다.dist/index.html.
이 경우 다음으로 업데이트해야합니다. <base href="/sub-folder/">
https://github.com/angular/angular-cli/issues/1080
localhost와 PhpStorm으로 옮길 때 온라인에서 작업 한 것으로 알려진 사이트에서이 문제가 발생했습니다.
이것은 온라인에서 잘 작동했습니다.
<link rel="stylesheet" href="/css/additional.css">
그러나 localhost의 경우 슬래시를 제거해야했습니다.
<link rel="stylesheet" href="css/additional.css">
따라서 이미 여기에 제공된 몇 가지 답변을 강화하고 있습니다. 복잡한 서버 설정 문제가 아닌 경로 또는 철자 오류 일 수 있습니다. 콘솔의 오류는 청어입니다. 네트워크 탭에서 404를 먼저 확인해야합니다.
여기에 제공된 답변 중 올바르지 않은 몇 가지 솔루션이 있습니다. 추가 type="text/html"또는로 변경 href하는 src것은 답이 아닙니다.
선택한 모든 유효성 검사기와 IDE에서 유효성을 검사하기 위해 모든 속성을 가지려면 미디어 값을 제공 rel해야합니다 stylesheet.
<link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
내 문제는 웹 팩을 사용하고 HTML CSS 링크에 상대 경로가 있었고 중첩 된 페이지로 이동할 때마다 잘못된 경로로 해결할 수 있다는 것입니다.
<link rel="stylesheet" href='./index.css'>
그래서 간단한 해결책은 .광산이 단일 페이지 응용 프로그램 이므로 제거하는 것이 었습니다 .
이처럼 :
<link rel="stylesheet" href='/index.css'>
그래서 항상 해결 /index.css
Chrome 도구를 열고 네트워크 탭을 선택한 다음 페이지를 다시로드하고 CSS의 파일 요청을 찾아 파일 내부에 무엇이 있는지 찾아 볼 수 있습니다.
CSS에 적합하지 않은 일부 문자 또는 헤더를 포함하여 파일에 두 라이브러리를 병합 할 때 문제가 발생한 것일 수 있습니다.
나는 같은 문제가 있었다.
프로젝트 구조가 다음과 같은 트리 인 경우 :
index.html
assets
|-styles
|-custom-style.css
server
|- server.js
다음 코드를 추가하는 것이 좋습니다 server.js.
var path = require('path')
var express = require('express')
var app = express()
app.use('/assets', express.static(path.join(__dirname, "../assets")));
참고 : Path는 내장 Node.js 모듈이므로 npm을 통해이 패키지를 설치할 필요가 없습니다.
긴 답변 목록에 추가하면이 문제는 브라우저 동기화 관점에서 경로가 잘못되었다는 것을 알지 못했기 때문에 나에게도 발생했습니다.
이 간단한 폴더 구조가 주어지면 :
package.json
app
|-index.html
|-styles
|-style.css
href속성 내 <link>에서이 index.html이어야 app/styles/style.css하지styles/style.css
나는 같은 문제를 겪었고 내가 쓴 것을 확인했다.
<base href="./"> index.html에서
그런 다음
<base href="/">
그리고 잘 작동했습니다.
Node.js 애플리케이션의 경우 서버 파일에서 필요한 모든 모듈을 가져온 후 이것을 사용하십시오.
app.use(express.static("."));
- Express의 express.static 내장 미들웨어 기능 및 .html 파일의 <:
link rel="stylesheet" href="style.css">
필자의 경우 패키지를 라이브로 배포 할 때 공개 HTML 폴더에서 가져 왔습니다. 이유가있었습니다.
그러나 분명히 엄격한 MIME 유형 검사가 활성화되었으며 그것이 내 편인지 또는 내가 호스팅하는 회사인지 확실하지 않습니다.
그러나 index.php 파일과 동일한 디렉토리에서 스타일 폴더를 이동하자마자 오류가 발생하지 않고 스타일이 완벽하게 활성화되었습니다.
rel = "stylesheet"를 제거하고 type = "text / html"을 추가하십시오. 이렇게 보일 것입니다-
<link href="styles.css" type="text/html" />
문제의 주요 원인 중 하나는로드하려는 CSS 파일이 유효한 CSS 파일이 아니기 때문입니다.
원인 :
- 잘못된 MIME 유형
- 스타일 시트에 JavaScript 코드가있는 경우 (잘못된 웹팩 번 들러 구성으로 인해 발생할 수 있음)
로드하려는 파일이 유효한 CSS 스타일 시트인지 확인하십시오 (네트워크 탭에서 파일의 서버 URL을 가져 와서 새 탭을 누르고 확인하십시오).
body 태그 내에서 <link>를 사용할 때 고려해야 할 유용한 정보입니다.
link본문에 태그 가있는 것은 태그를 사용하는 표준 방법이 아닙니다. 그러나 페이지 최적화에 사용할 수 있습니다 (자세한 내용 : https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / 비즈니스 사용 사례가 필요한 경우 (콘텐츠 및 서버의 본문을 제공 할 때) 제공된 콘텐츠로 HTML 페이지를 렌더링해야합니다).
body 태그 내부에 유지하면서 우리는 속성을 추가 할 필요가 itemProperty에 link태그 등
<body>
<!-- … -->
<link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
<!-- … -->
</body>`
자세한 내용 itemProperty은 https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document를 참조하십시오 .
JavaScript에서 스타일을 다음과 같이 설정하는 경우 :
var cssLink = document.createElement("link");
cssLink.href = "./content.component.scss";
cssLink.rel = "stylesheet";
--> cssLink.type = "html/css";
(iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);
그런 다음 cssLint.type (위의 설명에서 화살표로 표시)을 "MIME"으로 변경하십시오.
cssLink.type = "MIME";
오류를 제거하는 데 도움이됩니다.
부트 스트랩 스타일이로드되지 않음 # 3411
https://github.com/angular/angular-cli/issues/3411
Bootstrap v. 3.3.7을 설치했습니다
npm install bootstrap --save그런 다음 필요한 스크립트 파일을
apps[0].scriptsangular-cli.json 파일에 추가했습니다."scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js" ], // And the Bootstrap CSS to the apps[0].styles array "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],ng 서브를 다시 시작했습니다
그것은 나를 위해 일했다.
이 문제는 reactjs 또는 angular에 cli 도구를 사용할 때 발생하므로 키는 자신의 라이트 서버로 초기화되므로 생성 한 백엔드 서버와 URL을 혼동시키는 도구이므로 최종 빌드 전체를 복사하는 것이 중요합니다. ... 전체 빌드 폴더를 가져 와서 백 엔드 서버 프로젝트의 자산 폴더에 덤프하고 Angular 또는 Reactjs와 함께 제공되는 서버가 아닌 백 엔드 서버에서 참조하십시오. 그렇지 않으면 특정 폴더를 프런트 엔드로 사용하고 있습니다 API 서버
JS없이 Express를 사용하는 경우 다음과 같이 작성하십시오. app.use (express.static ( 'public'));
내 CSS 파일은 public-> stylesheets-> app.css에 있습니다.
파일 이름과 경로를 세 번 확인하십시오. 필자의 경우 대상 폴더에 다음과 같은 내용이 있습니다.
lib
foobar.bundle.js
foobr.css
그리고이 링크 :
<link rel="stylesheet" href="lib/foobar.css">
브라우저가 JavaScript 파일을로드하려고 시도하고 파일을 찾을 수 없음 오류를 표시하는 대신 MIME 유형에 대해 불평한다고 생각합니다.
나는 같은 문제가 있었고 몇 시간 동안 디버깅 한 후에는 쓸 수없는 임시 파일과 관련이 있음을 알았습니다.
이동 관리 → 구성 → 파일 시스템 . 올바른 임시 디렉토리를 설정하십시오. 서버에 해당 디렉토리에 쓸 수있는 권한이 있는지 확인하십시오.
Angular 에서이 오류가 발생했습니다. 내가 해결 한 방법은 링크 요소에 ngIf를 배치하여 동적 URL이 채워질 때까지 DOM에 나타나지 않도록하는 것입니다.
OP와 관련이 없을 수도 있지만 여기에서 답을 찾아 보았습니다.
<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">
나는이 문제를 만났다.
' http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0 ' 에서 스타일 적용을 거부했습니다. MIME 유형 ( 'text / html')이 지원되는 스타일 시트 MIME 유형이 아니기 때문에 엄격한 MIME 검사가 활성화됩니다.
경로를 변경하면이 문제를 해결할 수 있습니다.
나는 같은 문제가 있었고, 실제로는 파일이 있어야 할 때 수동으로 HTML 파일로 CSS 파일을 가져 오려고했기 때문에 (정적 웹 사이트에서 항상처럼) CSS 파일을 가져 오려고했기 때문에 발생했습니다. Webpack에서 사용하는 시작점 JavaScript 파일로 가져옵니다.
스타일 시트를 HTML로 수동으로 작성하지 않고 기본 JavaScript 파일로 가져 오면 모두 예상대로 작동했습니다.
참고 URL : https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type
'IT' 카테고리의 다른 글
| 로컬 네트워크에서 유효한 모든 IP 주소 목록을 얻는 방법은 무엇입니까? (0) | 2020.03.28 |
|---|---|
| 정규식과 일치하는 문자열인지 확인하기위한 regex.test VS string.match (0) | 2020.03.27 |
| @PostConstruct를 사용하는 이유는 무엇입니까? (0) | 2020.03.27 |
| 백 스페이스 키가 다시 탐색되지 않도록하려면 어떻게해야합니까? (0) | 2020.03.27 |
| JavaScript로 CSS 클래스를 동적으로 작성하고 적용하는 방법? (0) | 2020.03.27 |