I know you can't do this on Chrome as I tried it and it failed. When I run the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p>Test</p>
<style>
@import "script.js";
</style>
</body>
</html>
with a 'script.js' file in the same folder I get the following error in the chrome console: image
My questions are:
- Is this the same for all browsers?
- Is there a workaround which allows you to import and run non .css files using the @import function?
The short answer is... no.
@importis built to import stylesheets. A common misconception is that you can import non-CSS files by doing the following:However, the only reason the line ending is dropped is because the URL for a native browser package need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. chrome://communicator/skin/). See here for details.
For more information, see the MDN docs here about
@import.