.vue ファイルで css をインポートすると scoped が効かない問題

困ったこと

.vue ファイルの <style> タグで下記のように css ファイルを読み込むと、scoped を指定しているにも関わらず、sample1.css のスタイルが全ファイルに適用されてしまいました。

<style scoped>
@import '../styles/sample1.css';
</style>

原因は今のところ分からず

同じ現象で困っている人は他にもいるようですが、原因までは辿り着けず。誰か分かる方がいたら教えて頂けると幸いです。

追記 2021/10/20

@felis さんが詳しくコメントしてくれました。ありがとうございました。

前提として、HTMLのスコープ付きCSSは実験的に実装された後、廃止されています。
vue（vue-loader）ではコンパイル時に属性を追記する変換を行う事でスコープ付きCSSの動作を疑似的に再現する仕組みです。

<style scoped>の中に定義されたCSSはプリプロセッサによってスコープ付きCSSに書き換えられます。
この時、src属性で読み込ませたCSSファイルは<style>要素の中に展開されてから処理されるようです。
@import命令による別ファイルの読み込みはCSS自体の仕様でありWebブラウザが解釈するのでプリプロセッサでは関知しません。
（SASS/SCSSではすべてがコンパイラの処理対象なので@importの先もスコープ内に展開したかの様に処理されます）

スコープ付きCSS - vue-loader

とりあえず解決方法

次のようにすれば解決するということが分かりました。

その１： SCSS ファイルに置き換える

lang="scss" を指定して、css ファイルを scss にリネームすると正しく動きます。

<style lang="scss" scoped>
@import '../styles/sample1.scss';
</style>

その２： src=xxx で読み込む

<style>タグで src=cssファイル名を指定して読み込む。

<style src="../styles/sample1.css" scoped>
</style>