问题描述
问题：是否有一个使用 Sass 的简单 Webpack 配置，能够在 .scss 文件中使用 URL 链接，其他 CSS 加载器之间没有问题，并且项目仍然维护文件哈希？
1.总结问题
我想要一个非常简单的 Webpack 设置，它使用 Sass 并且能够接受各种文件类型，例如 .mp4 文件。我曾尝试删除和添加各种 CSS 加载器以相互配合使用，但我必须做出一些妥协，因为一个 CSS 加载器将允许 CSS URL 功能，但不允许捆绑文件中的文件哈希。
以下是我遇到此问题的当前项目：barista-competition-challenge 。我在这个项目中使用的当前加载器是：
- babel-loader
- 网址加载器
- MiniCssExtractPlugin.loader
- css-loader
- postcss-loader
- sass-loader
- 文件加载器
我还在项目中使用了以下插件：
- CleanWepbackPlugin
- MiniCssExtractPlugin
- HtmlWebpack 插件
- webpack.ProvidePlugin
我曾经/现在遇到以下问题：
- 能够在我的 .scss 文件中使用 URL() 属性功能
- 必须将我所有的资产文件（图像和视频）导入到“src/javascript/index.js”下的项目的 src 中
- 一旦我在“dist/videos”文件夹中构建，我的视频文件就会实际显示
- 我的“dist”文件夹中的捆绑文件在文件名中没有文件哈希
目前，该项目在技术上可行，我能够让视频显示在“dist/videos”文件夹中，并且能够在我的 .scss 文件中使用 URL() 属性。但是，这是有代价的，因为我必须将所有 .scss 资产文件导入到项目的 src 中，并且我无法在我的捆绑文件中使用哈希值，因为这特别会扰乱对我的背景视频的 URL() 调用我的最终捆绑 .css 文件和对我的图像的引用。
2.我的尝试
最初，我尝试了 Chitru Shrestha 在 Medium 上的这个 Basic Webpack configuration 博客中的 Wepback 设置。
最初，我无法在 .scss 文件中使用 URL() 属性功能，并且我在使用 mini-css-extract-plugin 时遇到了问题。这让我陷入了一个有太多链接的兔子洞，无法在下面列出 mini-css-extract-plugin 的问题。我还尝试了太多指向 StackOverflow 上各种博客和帖子的链接，这些链接涉及各种 Wepback 配置设置，这些设置对于我所需要的来说太复杂了。我还尝试了我目前拥有的装载机的每一种组合。我尝试在这些不同的加载器中注释和注释以试图获得我想要的东西。
我正在寻找的是一个简单的 Wepback 配置，其中：
- 我可以在我的 .scss 文件中使用 URL() 属性功能
- 我的 .scss 文件（以及 dist 文件夹中的所有文件）使用文件名中的 contenthash 正确构建
- 我可以在我的 .scss 文件中引用我的资产（图像和视频），而无需手动将它们导入到我的项目的 src 中
- 我能够使用各种文件类型，包括 .mp4 文件类型
- 一旦文件名具有新的内容哈希值，我在 dist 文件夹中构建的 .css 文件中的 URL() 属性引用在构建过程中不会被弄乱
预先感谢您阅读我的问题，我期待查看答案！
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）