Fails to compile

[Arkrait]

Ejected create react app with --scripts-version=react-scripts-ts. Followed the tutorials and scss files seem to compile nicely until I try to modify the variables, in which case it fails to build with

Undefined variable: "$primary-9". in blah\App.scss

Webpack plugin -
new AntdThemePlugin(path.join(__dirname, "src", "theme.scss"))

scss files -

/* theme.scss */
@import "~antd/dist/antd.css";
$primary-color: #cc241d;

/* App.scss
* -------------------
*/
@import "./theme.scss";

.App {
  text-align: center;
  color: $primary-9;
}

Webpack loaders -

{
  test: /\.scss$/,
  use: [
    "style-loader",
    {
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 1,
        modules: true,
        camelCase: true
      }
    },
    AntdThemePlugin.themify("sass-loader")
  ]
},

{
  test: /\.less$/,
  use: [
    "style-loader",
    {
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 1
      }
    },
    AntdThemePlugin.themify("less-loader")
  ]
},

{
  test: /\.css$/,
  use: [
    require.resolve("style-loader"),
    {
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 1
      }
    },
    {
      loader: require.resolve("postcss-loader"),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: "postcss",
        plugins: () => [
          require("postcss-flexbugs-fixes"),
          autoprefixer({
            browsers: [
              ">1%",
              "last 4 versions",
              "Firefox ESR",
              "not ie < 9" // React doesn't support IE8 anyway
            ],
            flexbox: "no-2009"
          })
        ]
      }
    }
  ]
},

[hannadrehman]

/* theme.scss */ $primary-color: #cc241d;

i don't think you should import anything in theme.scss becauseAntdThemePlugin will convert all '$' => '@' to make sass variable into less variables.
try it without the @import "~antd/dist/antd.css";

[prncc]

Actually, importing inside of theme.scss should work just fine -- the plugin goes beyond just replacing symbols and actually compiles the variables there. I tried out an import and it worked fine, so maybe the issue is with your paths?

In any case, you shouldn't have to import antd.css here because the plugin will inject Ant Design variables into the theme for you.