I'm working on a website that uses Gulp.js to compile and browser sync to keep the browser synchronised with my changes.
The Gulp.js task compiles everything properly, but on the website, I'm unable to see any style, and the console shows this error message:
Refused to apply style from
'http://localhost:3000/assets/styles/custom-style.css' because its
MIME type ('text/html') is not a supported stylesheet MIME type, and
strict MIME checking is enabled.
Now, I don't really understand why this happens.
The HTML includes the file like this (which I am pretty sure is correct):
<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>
And the style sheet is a merge between Bootstrap and Font Awesome styles for now (nothing custom yet).
The path is correct as well, as this is the folder structure:
index.html
assets
|-styles
|-custom-style.css
But I keep getting the error.
What could it be? Is this something (maybe a setting?) for gulp/browsersync maybe?
For Node.js applications, check your configuration:
app.use(express.static(__dirname + '/public'));
Notice that /public does not have a forward slash at the end, so you will need to include it in your href option of your HTML:
href="/css/style.css">
If you did include a forward slash (/public/) then you can just do href="css/style.css".
The issue, I think, was with a CSS library starting with comments.
While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.
Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.
Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.
In most cases, this could be simply the CSS file path is wrong. So the web server returns status: 404 with some Not Found content payload of html type.
The browser follows this (wrong) path from <link rel="stylesheet" ...> tag with the intention of applying CSS styles. But the returned content type contradicts so that it logs an error.
This error can also come up when you're not referring to your CSS file properly.
For example, if your link tag is
<link rel="stylesheet" href="styles.css">
but your CSS file is named style.css (without the second s) then there is a good chance that you will see this error.
I had this error for a Bootstrap template.
<link href="starter-template.css" rel="stylesheet">
Then I removed the rel="stylesheet" from the link, i.e.:
<link href="starter-template.css">
And everything works fine. Try this if you are using Bootstrap templates.
I have changed my href to src. So from this:
<link rel="stylesheet" href="dist/photoswipe.css">
to this:
<link rel="stylesheet" src="dist/photoswipe.css">
It worked. I don't know why, but it did the job.
Make a folder just below/above the style.css file as per the Angular structure and provide a link like <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.
Comments in your file will trip this. Some minifiers will not remove comments.
Also
If you use Node.js and set your static files using express such as:
app.use(express.static(__dirname + '/public'));
You need to properly address the files.
In my case both were the issue, so I prefixed my CSS links with "/css/styles.css".
Example:
<link type="text/css" rel="stylesheet" href='/css/styles.css">
This solution is perfect as the path is the main issue for CSS not getting rendering
In addition to using:
<base href="/">
Remove the rel="stylesheet" part from your CSS links:
<link type="text/css" href="assets/styles/custom-style.css"/>
I simply referenced the CSS file (an Angular theme in my case) in the styles section of my Angular 6 build configuration in angular.json:
This does not answer the question, but it might be a suitable workaround, as it was for me.
I know it might be out of context but linking a non existed file might cause this issue as it happened to me before.
<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />
If this file does not exist you will face that issue.
The problem is that if you have a relative path, and you navigate to a nested page, that would resolve to the wrong path:
<link rel="stylesheet" href='./index.css'>
so the simple solution was to remove the . since mine is a single-page application.
Like this:
<link rel="stylesheet" href='/index.css'>
so it always resolves to /index.css
There are a lot of answers to this question but none of them seem to really work. If you remove rel="stylesheet" it will stop the errors but won't apply the stylesheets.
The real solution:
Just remove the .. It works then.
As mentioned solutions in this post, some of the solutions worked for me, but CSS does not apply on the page.
Simply, I just moved the "css" directory into the "Assest/" directory and everything works fine.
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
I got the same issue and then I checked that I wrote:
<base href="./"> in index.html
Then I changed to
<base href="/">
And then it worked fine.
Also for others using Angular-CLI and publishing to a sub-folder on the webserver, check this answer:
When you're deploying to a non-root path within a domain, you'll need to manually update the <base href="/"> tag in your dist/index.html.
In this case, you will need to update to <base href="/sub-folder/">
https://github.com/angular/angular-cli/issues/1080
I had this problem with a site I knew worked online when I moved it to localhost and PhpStorm.
This worked fine online:
<link rel="stylesheet" href="/css/additional.css">
But for localhost I needed to get rid of the slash:
<link rel="stylesheet" href="css/additional.css">
So I am reinforcing a few answers provided here already - it is likely to be a path or spelling mistake rather than any complicated server setup problem. The error in the console is a red herring; the network tab needs to be checked for the 404 first.
Among the answers provided here are a few solutions that are not correct. The addition of type="text/html" or changing href to src is not the answer.
If you want to have all of the attributes so it validates on the pickiest of validators and your IDE then the media value should be provided and the rel should be stylesheet, e.g.:
<link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
I have had the same problem.
If your project's structure is like the following tree:
index.html
assets
|-styles
|-custom-style.css
server
|- server.js
I recommend to add the following piece of code in server.js:
var path = require('path')
var express = require('express')
var app = express()
app.use('/assets', express.static(path.join(__dirname, "../assets")));
Note: Path is a built-in Node.js module, so it doesn't need to install this package via npm.
You can open the Google Chrome tools, select the network tab, reload your page and find the file request of the CSS and look for what it have inside the file.
Maybe you did something wrong when you merged the two libraries in your file, including some characters or headers not properly for CSS?
At times, this happens when the CSS file is not found. It's worth checking your base URL / path to the file.
Adding to a long list of answers, this issue also happened to me because I did not realize the path was wrong from a browser-sync point of view.
Given this simple folder structure:
package.json
app
|-index.html
|-styles
|-style.css
The href attribute inside <link> in file index.html has to be app/styles/style.css and not styles/style.css.
In case you are using Express.js without any JavaScript code, try with:
app.use(express.static('public'));
As an example, my CSS file is at public/stylesheets/app.css.
How I solved this.
For Node.js applications, you need to set your **public** folder configuration.
// Express js
app.use(express.static(__dirname + '/public'));
Otherwise, you need to do like href="public/css/style.css".
<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>
Note: It will work for http://localhost:3000/public/assets/css/custom.css. But couldn't work after build. You need to set app.use(express.static(__dirname + '/public')); for Express
For a Node.js application, just use this after importing all the required modules in your server file:
app.use(express.static("."));
express.static built-in middleware function in Express and this in your .html file: <link rel="stylesheet" href="style.css">
By going into my browsers console → Network → style.css ...clicked on it and it showed "cannot get /path/to/my/CSS", this told me my link was wrong.
I changed that to the path of my CSS file.
The original path before change was localhost:3000/Example/public/style.css. Changing it to localhost:3000/style.css solved it.
If you are serving the file from app.use(express.static(path.join(__dirname, "public"))); or app.use(express.static("public")); your server would pass "that folder" to the browser so adding a "/yourCssName.css" link in your browser solves it
By adding other routes in your browser CSS link, you'd be telling the browser to search for the css in route specified.
In summary: Check where your browser CSS link points to.
This is specific to TypeScript and Express.js
I Ctrl + F'd "TypeScript" and ".ts" and found nothing in these answers, so I'll add my solution here, since it was caused by (my inexperience with) TypeScript, and the solutions I've read don't explicit solve this particular issue.
The problem was that TypeScript was compiling my app.ts file into a JavaScript file in my project's dist directory, dist/app.js.
Here's my directory structure. See if you can spot the problem:
.
├── 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
My problem is that in app.ts, I was telling express to set my public directory as /public, which would be a valid path if Node.js actually were running TypeScript. But Node.js is running the compiled JavaScript, app.js, which is in the dist directory.
So having app.ts pretend it's dist/app.js solved my problem. Thus, I fixed the problem in app.ts by changing
app.use(e.static(path.join(__dirname, "/public")));
to
app.use(e.static(path.join(__dirname, "../public")));
https://github.com/froala/angular-froala/issues/170#issuecomment-386117678
Found the above solution of adding
href="/">
Just before the style tag in index.html
I was working with the React application and also had this error which led me here. This is what helped me.
Instead of adding <link> to the index.html, I added an import to the component where I need to use this style sheet:
import 'path/to/stylesheet.css';
In my case, when I was deploying the package live, I had it out of the public HTML folder. It was for a reason.
But apparently a strict MIME type check has been activated, and I am not too sure if it's on my side or by the company I am hosting with.
But as soon as I moved the styling folder in the same directory as the index.php file I stopped getting the error, and styling was activated perfectly.
Bootstrap styles not loading #3411
https://github.com/angular/angular-cli/issues/3411
I installed Bootstrap v. 3.3.7
npm install bootstrap --save
Then I added the needed script files to apps[0].scripts in the angular-cli.json file:
"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"
],
I restarted ng serve
It worked for me.
If you are setting Styles in JavaScript as:
var cssLink = document.createElement("link");
cssLink.href = "./content.component.scss";
cssLink.rel = "stylesheet";
/* → */ cssLink.type = "html/css";
(iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);
Then just change field cssLint.type (denoted by the arrow in the above description) to "MIME":
cssLink.type = "MIME";
It will help you to get rid of the error.
I am building Semantic UI with Gulp using this guide
However, the problem is now that the icons are not showing. So if I use
<i class="facebook icon"></i>, nothing shows up.
I guess I haven't built the icon font or something like that.
Is it necessary to load Font Awesome or something like that myself? I have read through the Semantic UI documentation, but I cannot find anywhere stating that I have to do anything to enable icons.
You need to include the font assets which are located in themes/default/assets/fonts/
The themes folder must be in the same directory as your semantic.css file.
The fonts are imported externally from the semantic.css file from within the themes directory.
To obtain this directory, download the zip for semantic ui and look inside the dist folder.
I was having the same issue, use this link tag in the head of your html and you're good to go :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Got this from their official website.
Since it's not marked as ansered yet in 2019... Here's the clear answer. The above answers are correct as well, just not straight forward.
So basically what you missed out is the inclusion of the icons themselves. When you download semantic-ui it comes with themes folder within the "dist" folder. what you must do is copy that themes folder and paste it in your project folder where your semantic-ui.css is located. and it will work.
Please remember to mark the question as answered.
I had an CORS-issue (causing square empty icons) with the Semantic UI Icons when loading the minified CSS from a CDN. Turns out that it was my location override that caused it, turning it off made the icons display properly.
I fixed the problem replacing this line
<link rel="stylesheet" type="text/css" href="/dist/semantic.min.css">
with this
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.7/dist/semantic.min.css">
I also had to add link to icon.min.css
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/components/icon.min.css">
I wrote a post about it on medium :)
In my case I forgot to import the semantic ui css file. Import it in the App.js ( as it is the top level file ) or anywhere inside your project.
import 'semantic-ui-css/semantic.min.css'
I had the same problem and I solve it adding the following lines on my webpack.mix.js
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff','public/css/themes/default/assets/fonts/icons.woff')
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.woff2','public/css/themes/default/assets/fonts/icons.woff2')
.copy('node_modules/semantic-ui-css/themes/default/assets/fonts/icons.ttf','public/css/themes/default/assets/fonts/icons.ttf')
and then executing the command
npm run dev
This add in my case the missing files I need
In the semantic.css file, you'll find this line:
background: url("./themes/.....")
so, what you have to do is to copy the themes folder with all its contents beside your semantic.min.css
All simply copy the folder Semantic-UI-CSS-master with all its contents to your public/static/wwww folder, and will get things working smoothly.
I partially fixed this by downloading icon.min.css from this link and then replacing the CDN link with this two lines:
<link rel="stylesheet" href="~/Content/icon.min.css" />
<link rel="stylesheet" href="~/Content/semantic.min.css"/>
There are still some icons missing: all the outlined ones.
You could also try the fonts folder from this branch but it did not work for me.
So as the other answers have provided you can change the script to look like:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
Stop the server and close your browser. If you do not fully close the browser the error will persist. Restart your server.
If this does not resolve your issue, you can also choose to install the CSS library locally via
npm install semantic-ui-css
Then, import the library into your root index.js component,
import "semantic-ui-css/semantic.min.css";
I was having the same problems using react
tried everything mentioned and nothing worked
then just replaced this link
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" />
hope that helps
I'm trying to setup a react-router for my first React webapp, it seems to be working except that the css doesn't load for my nested pages when I refresh the pages.
However it works for just one level e.g /dashboard but the css won't load for /components/timer
Here is what my index.jsx file looks like
import './assets/plugins/morris/morris.css';
import './assets/css/bootstrap.min.css';
import './assets/css/core.css';
import './assets/css/components.css';
import './assets/css/icons.css';
import './assets/css/pages.css';
import './assets/css/menu.css';
import './assets/css/responsive.css';
render(
<Router history={browserHistory}>
<Route path="/" component={Dashboard}/>
<Route path="/components/:name" component={WidgetComponent}/>
<Route path="*" component={Dashboard}/>
</Router>,
document.getElementById('root')
);
Any idea why?
I had this problem too, where my app wasn't loading style sheets and the like. However, I was importing my assets directly into my index.html entry point.
By replacing the links with absolute paths as per this documentation, my problem was resolved.
For me, this meant changing
<head>
<link rel="stylesheet" href="./style.css" ></link>
</head>
to this:
<head>
<link rel="stylesheet" href="/style.css" ></link>
</head>
I'm not sure if the same thing would work for your import statements, but it is worth a shot.
FYI I'm using the project layout from create-react-app.
Found it!
Add the HTML Element:
<base href="/" /> <!-- for local host -->
to your index page to set a base case for your URL so all else will follow suite.
I added
<base href="/" /> <!-- for local host -->
to my index.html head
And it is resolved.
The simplest solution is here (Need to change index.html only)
Just use %PUBLIC_URL% before every CSS or JS file.
You can check an example of %PUBLIC_URL% in index.html file if you created react app through create-react-app.
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
One thing is must: your CSS files and js files should be under a public directory.
If you are using create-react-app workflow, put the assets under public folder and use the special variable PUBLIC_URL.
Inside index.html use %PUBLIC_URL%:
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
Inside JS/JSX files use process.env.PUBLIC_URL:
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using import for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
Recommended Approach:
import stylesheets, images, and fonts from JavaScript by placing it along with src files.
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
Adding assets to public folder
When to use public folder
I know its a bit old thread, but ill share my solution here. Its a solution for setup that uses webpack instead create-react-app.
I found every other solution suggests to change the <link path in the html file. But like in my case webpack handles the asset linking.
I faced the same problem today. Routes like /some_route works but - /some_route/second_level it doesn't, leaving behind a message in console stating -
Refused to apply style from 'http://localhost:8080/some_route/some_style.css'.
I fixed this problem by updating my webpack.config.js file
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist'),
publicPath: '/', ////// <-- By adding this line
}
Hope it helps someone. Thanks!
Your script is not loading your css due to the 404 errors. Your webserver is not redirecting all /components/* request to index file and then routing to your view via react.
But now, specifically about fixing your css issues... In the past, I've struggled with the css imports in jsx files, so you are not alone :) Instead, I've chosen to use SASS or LESS to compile my css to a bundle.css file with grunt or gulp. Then load that bundle.css directly on my index.html file. One neat trick about using css compilers is every time you change a .scss or .less file, your bundle.css will get updated.
Hope I pointed you in the right direction.
Cheers,
I know this is weird , but if you use history#5.0.0 ,delete it and install history#4.10.1
react-router have many incompatibilities with history version 5 .
for me it's worked.