why the css is not applied with tarteaucitron?

Question

I'm working on an angular project, for which I'm trying to apply a certain css that was provided to me. This css is provided with the js file, tarteaucitron.js

So I've added the tarteaucitron.css in my angular.json in the styles part

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/font-awesome/css/font-awesome.min.css",
          "node_modules/animate.css/animate.min.css",
          "src/assets/tarteaucitron/css/tarteaucitron.css",   // this is where I added the css           
          "src/styles.scss"
        ],

Yet I'm having this error in my chrome debugging console

Refused to apply style from 'http://localhost:4200/css/tarteaucitron.css?v=20181023' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Can anyone explain, please?

Update

I've used the following answer but to no avail and no, the solution I received is closed to my problem but the solution is not working in my case.

Have you tried visiting that URL in the error? The most common cause of that error is that the server is returning something like a 404 page. — DBS, Sep 20 '19 at 13:50
@AndyK Your browser's network tab in the developers tools displays the complete headers returned by the server. Check the mime type there. — Denys Séguret, Sep 20 '19 at 14:26

score 1 · Answer 1 · answered Sep 20 '19 at 14:38

1

Removing the library and putting it into a vendor file (which is ALWAYS minified without comments)

answered Sep 20 '19 at 14:38

rafi muhammad

194
2
11

score 1 · Answer 2 · answered Sep 20 '19 at 14:55

1

Make a vendor file in assets folder and paste your css into vendor file and give path of your css file into index.html file.

answered Sep 20 '19 at 14:55

Pushprajsinh Chudasama

7,772
4
20
43

Andy K · Accepted Answer · 2019-11-14T19:09:27.530

After lengthy discussion, it seems that the culprit is the tarteaucitron.js file.

It contains this part

// Step 1: load css
if ( !tarteaucitron.parameters.useExternalCss ) {
    linkElement.rel = 'stylesheet';
    linkElement.type = 'text/css';
    linkElement.href = cdn + 'src/assets/tarteaucitron/css/tarteaucitron.css?v=' + tarteaucitron.version;
    document.getElementsByTagName('head')[0].appendChild(linkElement);
}

Commenting that part makes the css script readable.

why the css is not applied with tarteaucitron?

3 Answers3