Import JavaScript files with CSS

Question

Is it possible to use a CSS import file to import JavaScript pages?

@import url(Script.js);

@SergeiTulentsev My site only imports one URL in select pages. I have JavaScript for those pages but cannot add it in... — henryaaron, Dec 25 '11 at 17:32

score 11 · Accepted Answer · answered Dec 25 '11 at 17:29

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

score 5 · Answer 2 · answered Dec 25 '11 at 17:26

5

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>

answered Dec 25 '11 at 17:26

Frédéric Hamidi

258,201
41
486
479

I know that, I'm just asking since it would be cleaner to have one file – henryaaron Dec 25 '11 at 17:29
Well, since you want to reference an external script, you will always end up with at least two files... or am I missing something? – Frédéric Hamidi Dec 25 '11 at 17:32

score 3 · Answer 3 · edited May 23 '17 at 11:45

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.

edited May 23 '17 at 11:45

Community

1
1

answered Dec 25 '11 at 17:28

Daff

43,734
9
106
120

score -3 · Answer 4 · answered Dec 27 '19 at 13:51

// 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?

Import JavaScript files with CSS

4 Answers4

Linked

Related