0

I use a boilerplate that originally used a handlebars-helper to add a timestamp to the css and js links which was used in conjunction with a query-string.

I am attempting to move away from the query string method, but now cannot GET the css/js links to work.

I have successfully changed the handlebars templates to get a built webpage that has these css/js links. This in a local enviroment using xampp, which has not changed from the original query string method.

<link rel="stylesheet" href="/assets/styles/main.1536248544085.css" media="screen">
<link rel="stylesheet" href="/assets/styles/print.1536248544085.css" media="print">
<script src="/assets/scripts/main.1536248544086.js" async defer></script>

I have written a rewite rule for my .htaccess after reading this question on stackoverflow File Caching: Query string vs Last-Modified?

which is 

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)\.(.\d+)\.(js|css|png|jpe?g|gif)$ $1.$3 [L]

I have also tried

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule (/assets/)([^.]*)[/](main|print).+.(css|js)$ $1$2/$3.$4

both of which I tested here https://regexr.com/3v268 and here https://regexr.com/3v2l5, both of which take 

/assets/styles/main.1536240750886.css

and turn it into

/assets/styles/main.css

The boilerplate will build and display using browsersync but the error I get in my console is

Refused to apply style from 
'http://localhost:3000/assets/styles/main.1536248544085.css' because its 
MIME type ('text/html') is not a supported stylesheet MIME type, and strict 
MIME checking is enabled.
localhost/:299 GET 
http://localhost:3000/assets/scripts/main.1536248544086.js 404 (Not Found)
(index):1 Refused to apply style from 
'http://localhost:3000/assets/styles/main.1536248544085.css' because its 
MIME type ('text/html') is not a supported stylesheet MIME type, and strict 
MIME checking is enabled.
(index):1 Refused to apply style from 
'http://localhost:3000/assets/styles/print.1536248544085.css' because its 
MIME type ('text/html') is not a supported stylesheet MIME type, and strict 
MIME checking is enabled.
(index):299 GET http://localhost:3000/assets/scripts/main.1536248544086.js 
404 (Not Found)
(index):1 Refused to execute script from 
'http://localhost:3000/assets/scripts/main.1536248544086.js' because its 
MIME type ('text/html') is not executable, and strict MIME type checking is 
enabled.

This error applies to the two css and one js link.

As I am very much frontend, I am wondering if this approach is incorrect and will never work or whether I have not implemented the .htaccess correctly.

Will Moody
  • 1
  • It seems that you reply always with a text/html mime type that causes theses problems. It can have 2 meanings : either your file is the good one and you have to correct the mime type that is returned by your http server, either the response returned by your server is an error message and then that mean that your server has a problem with your rewrite rule. I would advise you to make sure that you are in the first or second case (chrome will help you if you inspect code and check the network tab while running your query). – Christophe Sep 07 '18 at 09:25
  • @Christophe Thiry Seems that I need to use some rewrite rules for Browsersync, as this is used in the local environment. I cannot seem to get this working, I use this 'RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.+)\.(\d+)\.(js|css)$ $1.$3 [L]' in my live .htaccess file, which works great, any help in converting that to work with Browsersync would be fantastic. I have tried 'rewriteRules: [{ match: '^(.+).(d+).(js|css)$ $1.$3', replace: '/assets/styles/main.css', },' but this doesn't work – Will Moody Dec 10 '18 at 15:48
  • Sorry can't help with that as your question is somehow different from the one you've posted at first I suggest you to ask another question with your more specific problem. – Christophe Dec 17 '18 at 07:22

0 Answers0