我的React github页面部署未加载CSS

Question

I am trying to get my react up on github pages, but it isn't loading the CSS at all. My project uses scss, which are under it's own dir in src/. They are separated by components and imported in each react component. It works fine when I run the dev server, but when I try to deploy to github pages, everything works fine except the css which fails to load. Do I need to add something to the webpack.config.prod file as well?

Here is my project structure:

/rootDir
  config
  node_modules
  public
    images
    index.html
    manifest.json
  scripts
  src
    js
      components
        ...
        App.js
    scss
      ...
      App.scss
    index.js
    registerServiceWorker
  package.json

Here is my webpack.config.dev:

{
  test: /\.css$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        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',
          }),
        ],
      },
    },
  ],
},
//Adding SCSS
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
},

Answer 1

I solved this by adding the snippet below to my webpack.config.prod file

{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader'
  ]
},