MIME 유형으로 인해 스타일시트가 로드되지 않음
Gulp.js를 사용하여 컴파일하고 브라우저 동기화를 사용하여 브라우저와 변경 사항을 동기화하는 웹 사이트를 만들고 있습니다.
Gulp.js 태스크는 모든 항목을 적절하게 컴파일하지만 웹 사이트에서 스타일을 볼 수 없으며 콘솔에 다음 오류 메시지가 표시됩니다.
해당 MIME 유형('텍스트/html')이 지원되는 스타일시트 MIME 유형이 아니며 엄격한 MIME 검사가 사용 가능하므로 'http://localhost:3000/assets/styles/custom-style.css'의 유형 적용을 거부했습니다.
왜 이런 일이 일어나는지 이해가 안 돼요
HTML 에는 다음과 같은 파일이 포함되어 있습니다(정확하다고 생각합니다).
<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>
그리고 스타일시트는 현재 Bootstrap과 Font Awesome 스타일을 결합한 것입니다(아직 커스텀은 없습니다).
폴더 구조이므로 경로도 정확합니다.
index.html
assets
|-styles
|-custom-style.css
근데 계속 오류가 나요.
무슨 일이지?혹시 이게 꿀꺽/브라우저 싱크를 위한 것(설정이 아닐까?)인가요?
Node.js 응용 프로그램의 경우 설정을 확인합니다.
app.use(express.static(__dirname + '/public'));
「 」라는 점에 해 주세요./public 말미에 의.HTML href 는 슬래시를 사용합니다.
href="/css/style.css">
「」 「」 「」)를 ./public/ 하다, 하다, 하다, 하다 됩니다.href="css/style.css".
내 생각에 문제는 댓글로 시작하는 CSS 라이브러리에 있었다.
개발 중에는 파일을 최소화하고 코멘트를 삭제하지 않습니다.이는 스타일시트가 몇 가지 코멘트로 시작되어 CSS와는 다른 것으로 인식되었음을 의미합니다.
라이브러리를 삭제하고 벤더 파일에 저장하면(항상 코멘트 없이 최소화됩니다) 문제가 해결되었습니다.
다시 말씀드리지만, 이것이 수정이라고 100% 확신할 수는 없지만, 이제 예상대로 작동하기 때문에 여전히 제게는 승리입니다.
대부분의 경우 이는 단순히 CSS 파일 경로가 잘못되었을 수 있습니다.따라서 웹 서버는status: 404 정도와 함께Not Found , " "htmldiscloss.discloss.
는 이 <link rel="stylesheet" ...>CSS 스타일을 적용할 목적으로 태그를 지정합니다.그러나 반환된 콘텐츠유형은 모순되므로 오류가 기록됩니다.
이 에러는, CSS 파일을 올바르게 참조하고 있지 않은 경우에도 발생할 수 있습니다.
예를 들어 링크 태그가
<link rel="stylesheet" href="styles.css">
, CSS 은 " " 입니다.style.css(두 번째 s를 포함하지 않음)이 에러가 표시될 가능성이 높습니다.
부트스트랩템플릿에서 이 오류가 발생하였습니다.
<link href="starter-template.css" rel="stylesheet">
, 는, 저, 저, 저, the, the, the, the, the, the, the, the, the, the, the을 뺐어요.rel="stylesheet""" " " " " " " : " :
<link href="starter-template.css">
그리고 모든 것이 잘 작동한다.부트스트랩템플릿을사용하는경우이것을실행해보세요.
가 바뀌었어요.href로로 합니다.src★★★★★★★★★★★★★★★★★★:
<link rel="stylesheet" href="dist/photoswipe.css">
다음과 같이 입력합니다.
<link rel="stylesheet" src="dist/photoswipe.css">
됐다.왜 그랬는지는 모르겠지만 효과가 있었어요.
바로 Angular style.css와 같은 합니다.<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.
파일에 있는 코멘트가 이 문제를 해결합니다.일부 미니어에서는 코멘트가 삭제되지 않습니다.
또한.
Node.js를 사용하여 정적 파일을 설정하는 경우express예를 들어 다음과 같습니다.
app.use(express.static(__dirname + '/public'));
파일 주소를 올바르게 지정해야 합니다.
둘 다 문제였기 때문에 CSS 링크 앞에 "/css/styles.css"를 붙였습니다.
예:
<link type="text/css" rel="stylesheet" href='/css/styles.css">
이 솔루션은 CSS가 렌더링을 얻을 수 없는 경우 경로가 가장 큰 문제이기 때문에 완벽합니다.
사용 방법:
<base href="/">
를제 remove remove remove를 remove remove 를 remove 。rel="stylesheet"CSS:
<link type="text/css" href="assets/styles/custom-style.css"/>
Angular 6 빌드 구성의 스타일 섹션에서 CSS 파일(내 경우 Angular 테마)을 참조했을 뿐입니다.json:
이것은 질문에 대한 답변은 아니지만, 나에게도 그랬듯이 적절한 회피책이 될 수 있습니다.
문맥에 맞지 않을 수 있다는 것은 알지만 존재하지 않는 파일을 링크하면 이 문제가 발생할 수 있습니다.
<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />
이 파일이 존재하지 않으면 해당 문제가 발생합니다.
문제는 상대 경로가 있고 중첩된 페이지로 이동하면 잘못된 경로로 해결된다는 것입니다.
<link rel="stylesheet" href='./index.css'>
그래서 간단한 해결방법은 이 시스템을 제거하는 것이었습니다..한 페이지짜리 어플리케이션이라서요.
다음과 같이 합니다.
<link rel="stylesheet" href='/index.css'>
항상 /index.css
이 질문에 대한 많은 답변이 있지만 실제로 효과가 있는 답변은 없는 것 같습니다.「」를 rel="stylesheet"에러는 정지되지만 스타일시트는 적용되지 않습니다.
진정한 해결책은 다음과 같습니다.
요..그럼 되겠네요.
이 투고에서 설명한 바와 같이 몇 가지 솔루션은 나에게 효과가 있었지만 페이지에는 CSS가 적용되지 않습니다.
단순히 "ss" 디렉토리를 "Assest/" 디렉토리로 이동하면 모든 것이 정상적으로 작동합니다.
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
같은 문제를 받고 제가 쓴 것을 확인했습니다.
<base href="./">index로 지정합니다.
그리고 나서 나는 로 바꿨습니다.
<base href="/">
그리고 잘 작동했죠.
또, Angular-CLI 를 사용해 Web 서버상의 서브 폴더에 퍼블리시 하는 경우는, 다음의 회답도 확인해 주세요.
패스에 할 .<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답이아아 아아아다다
가장 및 할 경우 값을 하고 "Atribute"를 IDE로 지정해야 합니다.relshould be stylesheet 예: 개요:
<link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
저도 같은 문제가 있었어요.
프로젝트의 구조가 다음 트리와 같은 경우:
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")));
주의: 경로는 내장 Node.js 모듈이므로 npm을 통해 이 패키지를 설치할 필요가 없습니다.
Google Chrome 도구를 열고 네트워크 탭을 선택하고 페이지를 새로고침하여 CSS의 파일 요청을 검색하여 파일 내에 있는 파일을 찾을 수 있습니다.
파일내의 2개의 라이브러리를 Marge 했을 때에, CSS에 적합하지 않은 문자나 헤더를 포함한, 뭔가 잘못된 것이 있었을 가능성이 있습니다.
CSS 파일을 찾을 수 없을 때 이 문제가 발생할 수 있습니다.파일의 기본 URL/경로를 확인하는 것이 좋습니다.
많은 답변과 더불어 브라우저 동기화 관점에서 경로가 잘못되었음을 깨닫지 못했기 때문에 이 문제가 발생하기도 했습니다.
다음과 같은 간단한 폴더 구조가 있습니다.
package.json
app
|-index.html
|-styles
|-style.css
href <link>파일 index.filename은 다음과 같아야 합니다.app/styles/style.css andstyles/style.css.
JavaScript 코드 없이 Express.js를 사용하는 경우 다음을 사용해 보십시오.
app.use(express.static('public'));
들어 은 CSS에 .public/stylesheets/app.css.
Node.js 어플리케이션의 경우 서버 파일 내의 모든 필수 모듈을 Import한 후 다음 명령을 사용합니다.
app.use(express.static("."));
- express 빌트인 로, 파일에 express . static > 。html 음음음음음음음 。< >
link rel="stylesheet" href="style.css">
내가 이걸 어떻게 해결했는지.Node.js 응용 프로그램의 경우,**public**폴더 설정.
// Express js
app.use(express.static(__dirname + '/public'));
아니면 이렇게 해야 돼요.href="public/css/style.css".
<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>
주의: 다음 기간 동안 동작합니다.
http://localhost:3000/public/assets/css/custom.css빌드 후 작업을 할 수 없었습니다.설정해야 합니다.app.use(express.static(__dirname + '/public'));Express ★★★★★
내 브라우저 콘솔 → Network → style.css ...에 접속하여 "filength get /path/to/my/CSS"라고 표시하면 링크가 잘못되었음을 알 수 있습니다.나는 그것을 내 CSS 파일의 경로로 변경했다.
변경 전 원래 경로는 localhost:3000/Example/public/style.css였습니다.localhost:3000/style.css로 변경하면 해결되었습니다.
app.use(express.static(path.join(_dirname, "public")), app.use(express.static("public")))에서 파일을 제공하는 경우 서버는 "/yourCssName.css" 링크를 브라우저에 추가하여 해당 폴더를 해결합니다.
브라우저 CSS 링크에 다른 루트를 추가하면 브라우저에 지정된 경로에서 css를 검색하도록 지시됩니다.
요약:브라우저 CSS 링크가 가리키는 위치를 확인합니다.
https://github.com/froala/angular-froala/issues/170#issuecomment-386117678 위의 추가 솔루션을 찾았습니다.
href="/">
index.html 스타일태그 직전
리액트 어플리케이션으로 작업 중 오류가 발생하여 여기로 오게 되었습니다.이게 날 도와준 거야
「 」를 추가하는 , 「 」를 추가해 .<link>index.html , , 을했습니다.import가 있는 합니다.
import 'path/to/stylesheet.css';
이는 TypeScript 및 Express.js에만 해당됩니다.
I + 'TypeScript' 및 '.ts'는 이러한 답변에서 찾을 수 없었습니다.따라서 TypeScript에 대한 경험이 부족하기 때문에 이 문제를 명확하게 해결할 수 없는 솔루션을 여기에 추가합니다.
는 TypeScript가 의 TypeScript를 이었습니다.app.ts을 저장하다dist 「」,dist/app.js.
여기 제 디렉토리 구조가 있습니다.문제를 발견할 수 있는지 확인합니다.
.
├── app.ts
├── dist
│ ├── app.js
│ ├── app.js.map
│ └── js
│ ├── dbclient.js
│ ├── dbclient.js.map
│ ├── mutators.js
│ └── mutators.js.map
├── public
│ ├── css
│ │ └── styles.css
├── tsconfig.json
├── tslint.json
└── views
├── index.hbs
└── results.hbs
는 '이냐'에.app.ts를 express로 /publicNode.js가 실제로 TypeScript를 실행하고 있는 경우 유효한 경로입니다.그러나 Node.js는 컴파일된 JavaScript를 실행하고 있습니다.app.js은 에에다 the the the the the ,에 나와있습니다.dist디렉토리로 이동합니다.
가지고 있다app.ts 인 체하다dist/app.js을 사용하다해서 제가 .app.ts
app.use(e.static(path.join(__dirname, "/public")));
로.
app.use(e.static(path.join(__dirname, "../public")));
저 같은 경우에는 패키지를 라이브로 전개할 때 퍼블릭 HTML 폴더에서 제외되어 있었습니다.이유가 있었어.
하지만 엄격한 MIME 타입의 체크가 발동된 것 같아서, 그것이 제 쪽인지, 아니면 제가 호스트하고 있는 회사인지 잘 모르겠습니다.
그러나 스타일링 폴더를 index.php 파일과 같은 디렉토리로 이동하자마자 오류가 발생하지 않게 되어 스타일링이 완벽하게 활성화 되었습니다.
#3411을 로드하지 않는 부트스트랩 스타일
https://github.com/angular/angular-cli/issues/3411
부트스트랩 v. 3.3.7을 설치했습니다.
npm install bootstrap --save필요한 했습니다.
apps[0].scripts.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 serve를 재기동했습니다.
그것은 나에게 효과가 있었다.
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";
오류를 제거하는 데 도움이 될 것입니다.
언급URL : https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type
'programing' 카테고리의 다른 글
| 경로에서 파일 이름 추출 (0) | 2023.04.08 |
|---|---|
| 항상 nvarchar(MAX)를 사용할 경우 단점이 있습니까? (0) | 2023.04.08 |
| 리액트 - 스타일 컴포넌트를 사용한 패싱 소품 (0) | 2023.04.03 |
| WordPress - 사용자가 로그인하고 있는지 확인합니다. (0) | 2023.04.03 |
| wordpress : add_action : 두 번째 파라미터가 함수명이 아닌 배열인 이유 (0) | 2023.04.03 |