webpack extraTextPlugin 打包CSS成功, 页面上不起作用

Question

我用extraTextPlugin插件打包CSS为一个单独的文件, 引入到页面中

在开发环境下已经成功,但是切换到生产环境后, CSS打包成功, 并且在dist目录(styles.css)

在HTML页面中也有引用<link href="./styles.css" rel="stylesheet">,但是却一直报错404找不到styles.css,可是明明dist目录下有这个文件啊, 而且 CSS里有样式的

下面是我的config配置

 {
          test: /\.scss$/,
          include: helpers.root('src/app/scss'),
          use: ExtractTextPlugin.extract(
            {
              fallback: 'style-loader',
              use: 'css-loader!sass-loader',
            })
        },
        /*
         * to string and css loader support for *.css files
         * Returns file content as string
         *
         */
        {
          test: /\.css$/,
          exclude: helpers.root('src/app/scss'),
          loaders: ['raw-loader']
        },
        
        
        new ExtractTextPlugin("styles.css"),