mode inject works but, extract doesnt

[leadq]

Hello, After I triend so much things with rollup-plugin-postcss, I finally found your awesome library. Then I tried both modes and mode inject worked but extract didnt. I want to split css codes from js. My latest config file is like below. Any help ? What am I missing?

import resolve from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import commonjs from "@rollup/plugin-commonjs";
import url from "@rollup/plugin-url";
import svgr from "@svgr/rollup";
import external from "rollup-plugin-peer-deps-external";
import json from "@rollup/plugin-json";
import pkg from "./package.json";
import styles from "rollup-plugin-styles";
import autoprefixer from "autoprefixer";

export default {
    input: "src/index.js",
    outputs: [
        {
            file: pkg.main,
            format: "cjs",
            sourcemap: true
        },
        {
            file: pkg.module,
            format: "es",
            sourcemap: true
        }
    ],
    plugins: [
        styles({
            mode: "extract",
            plugins: [autoprefixer()],
            url: {
                inline: true
            }
        }),
        external({ includeDependencies : false }),
        url(),
        svgr(),
        json(),
        resolve({
            browser: true
        }),
        babel({
            exclude: "node_modules/**",
            presets: [
                ["@babel/preset-env", { modules: false }],
                "@babel/preset-react"
            ],
            plugins:["@babel/plugin-proposal-class-properties"],
            babelrc: false
        }),
        commonjs()
    ],
    external: ["lodash"]
}

exported files below:

When I search for these css files in js files, I couldn't find any related code about css. Should I?

Note: My import statements are in index.js like that:

import './style.scss';
import './skin.scss';
import './App.scss';