CSS 没有加载到我的 react github 页面部署中

Question

我试图在 github 页面上做出反应，但它根本没有加载 CSS。我的项目使用 scss，它位于 src/ 中它自己的目录下。它们由组件分隔并在每个反应组件中导入。当我运行开发服务器时它工作正常，但是当我尝试部署到 github 页面时，一切正常，除了无法加载的 css。我还需要在 webpack.config.prod 文件中添加一些内容吗？

这是我的项目结构：

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

这是我的 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

我通过将下面的 sn-p 添加到我的 webpack.config.prod 文件中解决了这个问题

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