Inline @imports / working with CSS frameworks

[rrrnld]

I have not quite wrapped my head around the best practices when working with a CSS framework. I've hoped I could simply do

<style>
@import '/path/to/first/stylesheet.css'
@import '/path/to/second/stylesheet.css'
</style>

but unfortunately there's no inlining whatsoever, making the build-process kind of pointless (it sends an additional HTTP-request for every stylesheet, just like it would when embedding via a <link>-element).

I see that there is no pre-processing done on the normal CSS styles, but importing with node-sass fails with Error: media query expression must begin with '(' while parsing file: ....

Starting in 7.0.0, @import in LESS, SASS and Stylus files can be either relative to your build tool root working directory, or to the file being edited. Or one can set import paths in options.

This suggests to me that this is a bug. Is there any other option or what's the general way to go?

[danieldiekmeier]

This is generally the right way to go. Any preprocessor (I'm usually using Stylus, but it probably doesn't matter) should be able to import the file. You cut the error message off before the filename, but is the error occurring in your .vue component, or in the .css file?

Because it seems that the error happens in node-sass, with some malformed media query.

[tohjustin]

@heyarne @danieldiekmeier I had the same error message (Error: media query expression must begin with '(' while parsing file:) for the following code:

<style lang="sass">
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons)
...
</style>

Adding a semi-colon after the import statement seems to fix it:

<style lang="sass">
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons);
...
</style>