I tried include them as css:
<link rel="stylesheet" type="text/css" href="src/coffee/card.coffee"/>
<link rel="stylesheet" type="text/css" href="src/scss/card.scss"/>
If you're willing to use npm, see node-sass, it is an npm package that compiles your sass into css. And then you'll be able to link your compiled css file in your html.
It also allows you to setup a watcher, which will recompile your styles when you make a change. More information on how to do this using npm scripts can be found here.
For some reason my CSS isnt loading, I use sass so it creates a css folder outside of the public folder, And it just keeps doing that after i try to move it
my folder directory
-node project
-public
+index.htmlFOlder structure
-css
+style.css
+index.js (my server)
Here are my links in the css and the middleware im using to serve this in the index
html
<link rel="stylesheet" href="../css/style.css">
nodejs
app.use(express.static('public'))
Note im now also getting an error -
"Refused to apply style from 'http://127.0.0.1:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
To serve the multiple static files you need to add multiple middlewares in your index.js file
app.use(express.static('public'));
app.use(express.static('css'));
and link to CSS with this line in your index.html file
<link rel="stylesheet" href="style.css">
I have just created a new project using angulari cli.
When I try to include styles.css file in index.html
<link rel="stylesheet" type="text/css" href="styles.css">
I receive this in Chrome's dev tools network tab:
Refused to apply style from 'http://localhost:4200/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Any idea on how to fix this? I am running locally using ng serve
I also try adding
./styles.css
/styles.css
styles.css
when we create angular-cli project styles.css will apply default which you can see in .angular-cli.json as
app: {
styles:[
"styles.css"
]
}
here you can add more styles if you needed based on your project.
I just noticed that it is loaded automatically through some server requests for js files. So it is loading the styles through javascript.
For the new version angular cli, you no longer have to include the following lines
<link rel="stylesheet" type="text/css" href="styles.css">
in the index.html file. The cli will inject the contents automatically. So remove that line from the index.html and all should work.
if you need style.css just declare it in angular-cli.json as follows
"styles": [
"styles.scss",
],
I'm trying to build a static site using Angular. What I want is to have some global css/js/image files to be added to the index.html
This is my code in index.html
<link rel="stylesheet" type="text/css" href="css/layers.css">
My css folder in in the same level as the index.html file
I'm getting this error for each stylesheet I added (from ng serve with chrome)
Refused to apply style from 'http://localhost:4200/css/layers.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I've tried adding this too
#.angular-cli.json
"styles": [
"styles.css",
"css/layers.css"
],
How can I fix this?
My angular setup is
Angular CLI: 1.6.5
Node: 8.1.4
OS: darwin x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cli: 1.6.5
#angular-devkit/build-optimizer: 0.0.42
#angular-devkit/core: 0.0.29
#angular-devkit/schematics: 0.0.52
#ngtools/json-schema: 1.1.0
#ngtools/webpack: 1.9.5
#schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0
Solution 1 (with Bootstrap installed)
All you need to do is:
Go to .angular-cli.json under the root directory of your angular app.
Modify the styles array to include bootstrap before styles.css
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
Note: the path to bootstrap is relative to /src/index.html that's why you need "../" before node_modules.
Exit the current session of ng serve and start it again.
Here is an Awesome tutorial
Solution 2 (with Bootstrap referenced)
All you need to do is:
Go to styles.css under the root directory of your angular app.
Add this line at the top:
#import url('https://unpkg.com/bootstrap#3.3.7/dist/css/bootstrap.min.css');
Here is Angular docs
If you already have the styles.css in angularcli.json or angular.json, you don't need it in index.html. The cli will inject the contents automatically. So remove that line from the index.html and everything should work.
For someone who will face same problem.
The usual reason for this error message is when the browser tries to load that resource, the server returns an HTML page instead. For example, if your router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever... ref from here
Lets assume we have Angular 6 project with a file structure like this:
project
|-src
|-app
|-assets
|-environments
|----
lets assume we need to put a theming folder (that contains css files) directly inside src folder.
project
|-src
|-app
|-assets
|-environments
|-vendor // Theming
|-theme-light.css
|theme-dark.css
if we tried to access that theme file like this:
<link rel="stylesheet" type="text/css" href: '../vendor/theme-dark.css'>
an error will be thrown.
Refused to apply style from
'http://localhost:4200/vendor/theme-dark.css' because its MIME type
('text/html') is not a supported stylesheet MIME type, and strict MIME
checking is enabled.
If we paste that url in the browser, it will not give the plain css file because the path is wrong.
Solution
So What you need to do is find the correct path. (we can find out by past that url in
the browse and see what will returned)
In whis case putting ../src/ reference will fix the error
<link rel="stylesheet" type="text/css" href: '../src/vendor/theme-dark.css'>
Note: The exact path and router configuration depends on how you have setup your project and the libraries you are using with Angular.
#sameera207 Answers in comments are correct, relative path must work, I too had same issue and answers of comments are working for me. I tried to reproduce your error, I made css folder at level of index.html and added css file then added path in styles array.
"styles": [
"styles.css",
"./css/my-styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/tether/dist/css/tether.min.css"
],
then restarted server, I mean performed ng serve again and its working. Make sure you have done it and restared server and if still problem persists please let me know, I would be glad to help you.Thanks.
I had the same issue when I have installed material-icons using npm i -S material-icons from the terminal.
I have followed the instructions given in the npm package installation and have placed a link in the index.html like <link rel="stylesheet" type="text/css" href=<node_module_path/material-icons/iconfont/material-icons.css>
It has thrown a its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
You have to actually paste the path mentioned in href in angular.json file under styles array
Don't forget to restart the angular server, you can thank me later
FYI: Angular - V8.x, material-icons - V0.3.1
Thanks
Try by adding
<base href="/">
at top of all styles in index.html;
it works for me
(*Note: regarding asp.net boilerplate zero (paid version) but could be your solution also *)
Yes, #Franklin, strange though for a paid app making me repeatedly look like a forgetful old man. ;-) But might be system related.
I did found:
support.aspnetzero.com/QA/Questions/7742/Refused-to-apply-style-from- :
"run >> gulp build << command on terminal and recreate minified files"
worked for me. (again ;-) )
in your angular.json, add the config option
"extractCss": false,
like this
"options": {
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"extractCss": false,
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
...
I got the same type of error in my angular project. After adding this type="text/html" piece of code the error is gone.
<link rel="stylesheet" type="text/html" href="filename.css">
This is your code which links your layers.css file.
<link rel="stylesheet" type="text/css" href="css/layers.css">
From this line please remove type="text/css".
So, the code will become:
<link rel="stylesheet" href="css/layers.css">
Use this line, I hope It will work now. Thank You
make new CSS folder inside the assets folder then put your CSS file inside CSS then link again with the new location
Eg : - <link rel="stylesheet" href="assets/css/materialize.min.css">
I tried to run an angular code by asp.net zero using ng serve and faced this issue.
Normally all angular project run with the command ng serve. But the asp.net zero framework initially minifies the css file and then do the ng serve process..these 2 things are integrated in the command npm start. If atleast once npm start is done, the minified files are stored in our local... So next time onwards even if you do ng serve , it would be working..
So running npm start fixed the issue for me.
Had that issue because I have defined the same *.css file,
in both the *.html & the angular.json files
on angular
remove this line from index.html
<link rel="stylesheet" type="text/css" href="css/layers.css">
and then go to angular.json (since angular 5) or angular-cli.json depend on your version. set the path to your css files in the styles array like below
"styles": [
"src/style1.css",
"src/style2.css"
],
finally, restart the app. ng serve
Check the name file and path is right, in my case in angular I had under the array css
src/styles.css
And in the index.html file I added by mistake this
<link rel="stylesheet" type='text/css' href="style.css">
The style.css not exists in my case but styles.ccs yes.
Step 1:
Update your angular.json with the below details.
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"
]
Step 2:
Make sure the index.html DONT have the "css" and "js" imports/references.
I just had the same problem, it will solve it just by moving them from the node_modules folder to the assert folder.
For example...
<script type="text/javascript" src="assets/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/bootstrap/dist/css/bootstrap.min.css" />
<script src="assets/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
How to specify a custom stylesheet (external) to a SSP template (Scala Server Pages) in Scalate?
I tried specifying the html linking in the default.ssp file as follows.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<%= unescape(body) %>
</body>
</html>
However the stylesheet is not served by Scalatra (Jetty Web Server). I tried inserting the script through <%#include .. as well. Still no luck.
The web page is served without any stylesheet!
You need to have the style.css file as follows.
cd <YourProjectRoot>/src/main/webapp/
mkdir css
touch style.css
Create a style.css file inside a directory css which should be within the webapp directory, for the Scalatra to find out and serve the resource (stylesheet) appropriately.
Note: The folder should be named as css however the file can be named as anything.