Import JavaScript Files With CSS

Is it possible to use a CSS import file to import JavaScript pages? @import url(Script.js);

Solution 1:

The spec states the URL has to point to a style sheet:

The '@import' rule allows users to import style rules from other style sheets. Any @import rules must follow all @charset rules and precede all other at-rules and rule sets in a style sheet. The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.

CSS3 Syntax Specification: http://www.w3.org/TR/css3-syntax/#import

Solution 2:

No, this syntax is not supported.

You can, however, use the src attribute of the <script> element to specify the location of an external script resource:

<script type="text/javascript" src="Script.js">
</script>

Solution 3:

No, you can only import CSS stylesheets or .less and .css stylesheets when using Less. You can do it the other way around however and import CSS stylsheets with JavaScript.

Solution 4:

// Storing HTML code block in a variable
var codeBlock = '<div class="content">' +
                    '<h1>This is a heading</h1>' +
                    '<p>This is a paragraph of text.</p>' +
                    '<p><strong>Note:</strong> If you don\'t escape "quotes" properly, it will not work.</p>' +
                '</div>'; 
// Inserting the code block to wrapper element
document.getElementById("wrapper").innerHTML = codeBlock

How about this?