Chrome Extension Development: How to use @import url('theme.css')?

Question

How do I use@import css in a chrome extension? I've tried the code below, but I can't get it to work

some code is omitted so it's easier to read

File Structure

|-- lib
    |-- jquery.min.js

|-- theme
    |-- _import.css
    |-- theme-blue.css
    |-- theme-yellow.css
    |-- theme-green.css

|-- my-extension
    |-- my-extension.js
    |-- my-extension.css

|-- manifest.json

Code

manifest.json

{
"content_scripts": [{

    "js": [
        "lib/jquery.min.js",
        "my-extension/my-extension.js"],

    "css": [
        "theme/_import.css",
        "my-extension/my-extension.css"],

    "run_at": "document_end"
}],

"web_accessible_resources":[
    "lib/*",
    "theme/*"
]

}

_import.css

@import url('theme-blue.css');
@import url('theme-yellow.css');
@import url('theme-green.css');

theme-blue.css

* { background: blue; }

theme-yellow.css

* { background: yellow; }

theme-green.css

* { background: green; }