Jss: multiple @import statements

[valZho]

JSS:

export const stylesheet = {
    '@import': [
        'url(http://some.domain.com/externalsheet.css)',
        'url(http://other.domain.com/externalsheet.css)'
    ]
}

Resultant CSS:

@import url(http://some.domain.com/externalsheet.css), url(http://other.domain.com/externalsheet.css);

CSS SHOULD BE:

@import url(http://some.domain.com/externalsheet.css);
@import url(http://other.domain.com/externalsheet.css);

Also, @import calls have to be at the top of the CSS, so it would be nice if the JSS compiler would float any @import references in the code to the top of the output (outside of namespacing of course).

[kof]

Yep, its a missing feature or a bug, depending on how to look at it)

I am curious, why are you using @import ?

[valZho]

I just moved everything over to the main index.html using <link> tags. The imports are for things like Google fonts, Font Awesome, normalize, etc.

[kof]

published

[valZho]

Dang! You, sir... you rock.

[rizalibnu]

Hi, how about import css file from node_module packages ?

[kof]

@rizalibnu @import in JSS works same as in CSS. Also importing in the sense you are asking for is not related to this issue.

[trusktr]

@rizalibnu Late reply, but may help others: importing from node_modules is something not supported by JSS or by ES Module by default.

If you're using Webpack, you can do something non-standard by using css-loader, style-loader, file-loader, url-loader, or a combination of those, in order to add ability to import CSS at the top of your JavaScript (or TypeScript) modules:

import 'package-in-node_modules/path/to/foo.css' // assumes you're using style-loader, which automatically places the CSS in the DOM.
import Jss from 'jss'

// use Jss like before, without the `@import`, because you already imported it with an import statement.