MIME 유형으로 인해 스타일 시트가로드되지 않았습니다.

gulp브라우저를 변경 사항과 동기화하기 위해 컴파일 및 브라우저 동기화에 사용하는 웹 사이트에서 작업하고 있습니다 .

gulp 작업은 모든 것을 올바르게 컴파일하지만 웹 사이트에서 스타일을 볼 수 없으며 콘솔에 다음 오류 메시지가 표시됩니다.

MIME 유형 ( 'text / html')이 지원되는 스타일 시트 MIME 유형이 아니고 엄격한 MIME 검사가 활성화 되어있어 ' http : // localhost : 3000 / assets / styles / custom-style.css ' 에서 스타일을 적용하기 위해 거부되었습니다 .

이제 왜 이런 일이 발생하는지 이해하지 못합니다.

HTML에는 다음과 같은 파일이 포함되어 있습니다 (확실히 맞습니다).

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

그리고 스타일 시트는 현재 부트 스트랩과 글꼴이 멋진 스타일을 결합한 것입니다 (아무도 사용자 정의 없음).

폴더 구조이므로 경로도 정확합니다.

index.html
assets
|-styles
  |-custom-style.css

하지만 계속 오류가 발생합니다.

뭐가 될수 있었는지? gulp / browsersync에 대한 설정입니까?

Node.js 애플리케이션의 경우 구성을 확인하십시오.

app.use(express.static(__dirname + '/public'));

공지 사항 /public당신이 당신의 HTML의 당신의 HREF 옵션에 포함해야합니다, 그래서 마지막에 슬래시가 없습니다 :

href="/css/style.css">

슬래시 ( /public/)를 포함 시켰다면 그냥 할 수 있습니다 href="css/style.css".

문제는 주석으로 시작하는 CSS 라이브러리와 관련이 있다고 생각합니다.

개발 중에는 파일을 축소하지 않으며 주석을 제거하지 않습니다. 이는 스타일 시트가 일부 주석으로 시작하여 CSS와 다른 것으로 표시됨을 의미했습니다.

라이브러리를 제거하고 공급 업체 파일 (주석없이 항상 축소)에 넣으면 문제가 해결되었습니다.

다시 한 번, 이것이 100 % 확실하지는 않지만 지금 예상대로 작동하므로 여전히 승리입니다.

CSS 파일을 제대로 참조하지 않으면이 오류가 발생할 수 있습니다.

예를 들어 링크 태그가

<link rel="stylesheet" href="styles.css">

그러나 CSS 파일의 이름이 style.css(두 번째없이 ) 지정된 경우이 오류가 발생할 가능성이 높습니다.

대부분의 경우 이것은 단순히 CSS 파일 경로가 잘못되었을 수 있습니다. 따라서 웹 서버는 status: 404일부 유형의 Not Found컨텐츠 페이로드를 반환 html합니다.

브라우저는 <link rel="stylesheet" ...>CSS 스타일을 적용 할 목적으로 태그 에서이 잘못된 경로를 따릅니다 . 그러나 반환 된 콘텐츠 형식이 모순되어 오류를 기록합니다.

Angular 구조에 따라 style.css 파일 바로 아래 / 위에 폴더를 만들고 같은 링크를 제공하십시오 <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Bootstrap 템플릿에 대해이 오류가 발생했습니다.

<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">

효과가있었습니다. 왜 그런지 모르겠지만 일이 끝났습니다.

파일의 주석이 트립됩니다. 일부 축소 기는 주석을 제거하지 않습니다.

또한

Node.js 를 사용 하고 다음 express과 같이 정적 파일을 설정 하는 경우 :

app.use(express.static(__dirname + '/public'));

파일을 올바르게 처리해야합니다.

제 경우에는 둘 다 문제 였으므로 CSS 링크 앞에 "/css/styles.css"를 붙였습니다.

예:

<link type="text/css" rel="stylesheet" href='/css/styles.css">

CSS가 렌더링되지 않는 주요 문제는 경로이므로이 솔루션은 완벽합니다.

angular.json의 Angular 6 빌드 구성 의 스타일 섹션 에서 CSS 파일 (필자의 경우 Angular 테마)을 간단히 참조했습니다 .

이것은 질문에 대한 답은 아니지만 나에게 적합한 해결책 일 수 있습니다.

이 게시물에서 언급 한 솔루션에서 일부 솔루션이 효과가 있었지만 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="https://stackoverflow.com/">태그 를 수동으로 업데이트해야 합니다.dist/index.html.

이 경우 다음으로 업데이트해야합니다. <base href="https://stackoverflow.com/sub-folder/">

https://github.com/angular/angular-cli/issues/1080

내 문제는 웹 팩을 사용하고 HTML CSS 링크에 상대 경로가 있었고 중첩 된 페이지로 이동할 때마다 잘못된 경로로 해결할 수 있다는 것입니다.

<link rel="stylesheet" href='./index.css'>

그래서 간단한 해결책은 .광산이 단일 페이지 응용 프로그램 이므로 제거하는 것이 었습니다 .

이처럼 :

<link rel="stylesheet" href='/index.css'>

그래서 항상 /index.css

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">

문맥에 맞지 않을 수도 있지만 존재하지 않는 파일을 연결하면 이전에 나처럼이 문제가 발생할 수 있습니다.

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.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

Chrome 도구를 열고 네트워크 탭을 선택한 다음 페이지를 다시로드하고 CSS의 파일 요청을 찾아 파일 내부에 무엇이 있는지 찾아 볼 수 있습니다.

CSS에 적합하지 않은 일부 문자 또는 헤더를 포함하여 파일에 두 라이브러리를 병합 할 때 문제가 발생한 것일 수 있습니다.

JS없이 Express를 사용하는 경우 다음을 시도하십시오.

app.use(express.static('public'));

예를 들어 내 CSS 파일은 public/stylesheets/app.css

Node.js 애플리케이션의 경우 서버 파일에서 필요한 모든 모듈을 가져온 후 이것을 사용하십시오.

app.use(express.static("."));

• Express의 express.static 내장 미들웨어 기능 및 .html 파일의 <:link rel="stylesheet" href="style.css">

나는 같은 문제를 겪었고 내가 쓴 것을 확인했다.

<base href="./"> index.html에서

그런 다음

<base href="/">

그리고 잘 작동했습니다.

rel = "stylesheet"를 제거하고 type = "text / html"을 추가하십시오. 이렇게 보일 것입니다-

<link  href="styles.css" type="text/html" />

필자의 경우 패키지를 라이브로 배포 할 때 공개 HTML 폴더에서 가져 왔습니다. 이유가있었습니다.

그러나 분명히 엄격한 MIME 유형 검사가 활성화되었으며 그것이 내 편인지 또는 내가 호스팅하는 회사인지 확실하지 않습니다.

그러나 index.php 파일과 동일한 디렉토리에서 스타일 폴더를 이동하자마자 오류가 발생하지 않고 스타일이 완벽하게 활성화되었습니다.

부트 스트랩 스타일이로드되지 않음 # 3411

https://github.com/angular/angular-cli/issues/3411

1. Bootstrap v. 3.3.7을 설치했습니다

   npm install bootstrap --save

2. 그런 다음 필요한 스크립트 파일을 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"
   ],

3. ng 서브를 다시 시작했습니다

그것은 나를 위해 일했다.

브라우저가 관련 CSS 파일을 찾을 수 없으면이 오류가 발생할 수 있습니다.

Angular 응용 프로그램을 사용하는 경우 index.html에 CSS 파일 경로를 넣을 필요가 없습니다.

 <link href="xxx.css" rel="stylesheet"> -->

styles.css 파일에 관련 CSS 파일 경로를 넣을 수 있습니다.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

문제의 주요 원인 중 하나는로드하려는 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은 /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document를 참조하십시오 .

내 브라우저 콘솔> 네트워크> style.css ...로 이동하여 "/ 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 링크가 가리키는 위치를 확인하십시오.

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";

오류를 제거하는 데 도움이됩니다.

이 문제는 reactjs 또는 angular에 cli 도구를 사용할 때 발생하므로 키는 최종 도구 전체를 URL을 생성 한 백엔드 서버와 혼동하는 자체 라이트 서버로 초기화하므로 도구에서 최종 빌드 전체를 복사하는 것이 중요합니다. ... 전체 빌드 폴더를 가져 와서 백 엔드 서버 프로젝트의 자산 폴더에 덤프하고 Angular 또는 Reactjs와 함께 제공되는 서버가 아닌 백 엔드 서버에서 참조하십시오. 그렇지 않으면 특정 폴더를 프런트 엔드로 사용하고 있습니다 API 서버

Azure B2C 사용자 흐름에 사용자 지정 모양과 느낌을 추가하는 것과 동일한 문제가있는이 문제가 발생했습니다. 내가 찾은 것은 html 페이지가 참조 한 루트가 내 저장소 밥의 경로가 아니라 ../oauth/v2 (즉, oauth 서버 경로)라는 것입니다.

페이지의 전체 URL을 입력하면 문제가 해결되었습니다.

압축이 활성화되어 있는지 확인하십시오. 당신이 그것을 사용하거나 누군가가 그것을 활성화하면 app.use(express.static(xxx))도움이되지 않습니다. 서버가 압축을 허용하는지 확인하십시오.

웹팩에 Brotli 및 압축 플러그인을 추가 할 때 비슷한 오류가 발생하기 시작했습니다. 그런 다음 서버는이 유형의 컨텐츠 압축도 지원해야합니다.

Express를 사용하는 경우 다음이 도움이됩니다.

app.use(url, expressStaticGzip(dir, gzipOptions)

모듈이라고합니다 : express-static-gzip

내 설정은 다음과 같습니다

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}