Vue-loader: imported .css file in sass isn't under scope

[leonfancy]

When I @import a .css file in .vue scoped sass as below:

<template>
<div id="test"></div>
</template>

<style lang="scss" scoped>
  @import "foo.css";
</style>

foo.css content

#test {
    color: red;
}

the #test style is not just applied under the component scope.

But, if I change foo.css to sass file foo.scss, the scoped css will work.

[yyx990803]

Importing a plain .css in SCSS results in a raw URL import instead of inlining the target file into the current file. There's no way for vue-loader to process an URL import.

[viktorvesely]

For anyone else having this issue just change the file and import name to *.scss