search

webpack-contrib / style-loader

Style Loader
MIT License
1.66k stars 470 forks source link

Option injectType: 'linkTag' doesn't work #426

Closed Yegorich555 closed 5 years ago

Yegorich555 commented 5 years ago

Expected Behavior

Style-loader should integrate styles into a links without errors

Actual Behavior

Style-loader can't upload styles when we set options:{ injectType:'linkTag'} and browser-console-error is

Refused to apply style from 'http://localhost:8081/@font-face%20%7B%20%20font-family:%20%22OpenSans-Regular%22;%20%20/*%20IE9%20Compat%20Modes%20*/%20%20src:%20url(/fonts/OpenSans-Regular.eot);%20%20/*%20IE6-IE8%20*/%20%20src:%20url(/fonts/OpenSans-Regular.eot?#iefix)%20format(%22embedded-opentype%22),%20%20%20%20%20url(/fonts/OpenSans-Regular.woff2)%20%20%20%20%20%20format(%22woff2%22),%20%20%20%20%20url(/fonts/OpenSans-Regular.woff)%20%20%20%20%20%20format(%22woff%22),%20%20%20%20%20url(/fonts/OpenSans-Regular.ttf)%20%20%20%20%20%20...20/*test%20for%20autoprefixer%20in%20postcss*/%20%20color:%20antiquewhite;%20}.test-block%20{%20%20border:%204px%20dotted%20black;%20%20display:%20-webkit-box;%20%20display:%20-ms-flexbox;%20%20display:%20flex;%20%20-webkit-box-orient:%20vertical;%20%20-webkit-box-direction:%20normal;%20%20-ms-flex-direction:%20column;%20%20flex-direction:%20column;%20%20-webkit-box-align:%20center;%20%20-ms-flex-align:%20center;%20%20align-items:%20center;%20}.test-block%20+%20.test-block%20{%20%20margin-top:%2020px;%20}' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Code

Please use the following git-repo: https://github.com/Yegorich555/FromScratch_React/tree/styleloader-update

How Do We Reproduce?

Just run npm run serve and you will catch console-error during uploading styles

Is it some conflict in webpack configuration or is it just style-loader bug? Please let me know how it can be resolved if this is not style-loader issue at all.

alexander-akait commented 5 years ago

Something wrong with configuration, instead link, you have part of CSS

Yegorich555 commented 5 years ago

Looks like such using @import ... inside css doesn't work with linkTag option:

@import "normalize.css";
@import "sanitize.css";
@import "fontface.css";

body {
  font-family: "OpenSans-Regular", sans-serif;
}
....
alexander-akait commented 5 years ago

@Yegorich555 Don't use linkTag with css-loader, linkTag only for css files loaded using file-loader https://github.com/webpack-contrib/style-loader#linktag

Yegorich555 commented 5 years ago

Ok. I see - I just wanted to use link-tag option for improving debugging - it's helpful when you see the real path in a browser... Thanks for spending time. If you add more details into README it can be helpful for other users.

alexander-akait commented 5 years ago

@Yegorich555 yep, anyway feel free to send a PR to docs too