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">
효과가있었습니다. 왜 그런지 모르겠지만 일이 끝났습니다.