postcss "define-mixin" error "unknown at rule"

I am trying to define a mixin in my "_mixins.css" file but my text editor has a red line under "define-mixin" and I am not sure why. These are my dependencies

  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "css-loader": "^6.7.1",
    "postcss-import": "^15.0.0",
    "postcss-mixins": "^9.0.4",
    "postcss-nested": "^5.0.6",
    "postcss-simple-vars": "^7.0.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }

And this is my webpack.config.js

const postCSSPlugins = [
    require("postcss-import"),
    require("postcss-mixins"),
    require("postcss-simple-vars"),
    require("postcss-nested"),
    require("autoprefixer")
];

And my styles.css file

@import'normalize.css';
@import'base/_global';
@import'base/_variables';
@import'base/_mixins';
@import'modules/_large-hero';
@import'modules/_btn';

Not sure what the problem is I have scoured the internet for hours it seems like no one else has this problem I am not sure what to do at this point.