Heroku 在 SCSS 的 @import 上构建失败答案

【问题标题】：Heroku Build Fails on @import for SCSSHeroku 在 SCSS 的 @import 上构建失败
【发布时间】：2018-09-12 23:40:11
【问题描述】：

我有一个 react/webpack-4 应用程序，正在尝试在 Heroku 上构建它。当我在我的机器上构建它时，它工作得很好，但在 Heroku 上它会吐出这些错误：

ERROR in ./src/styles/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass loader/lib/loader.js): 

@import 'components/dashboard';
^

File to import not found or unreadable: components/dashboard.

它并不总是在我的 main.scss 文件中的同一 @import 语句上中断，但它总是在其中一个上中断。

这是我的 main.scss：

@import 'components/add-poster';
@import 'components/auth';
@import 'components/dashboard';
@import 'components/navigation';

所有名称都与我的文件相匹配，并带有正确的前缀 _（即：_dashboard.scss）。

这是我的产品 webpack 构建文件：

module.exports = merge(base, {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [
      { 
        use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ], 
        test: /\.scss$/ 
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ parallel: true, sourceMap: true }),
      new OptimizeCssAssetsPlugin({})
    ]
  },
  plugins: [ 
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ]
})

这已经让我发疯了几个小时，任何帮助或见解将不胜感激。谢谢。

【问题讨论】：

标签： reactjs heroku sass webpack-4

【解决方案1】：

在一次又一次地重新格式化 webpack 的漫长而艰巨的过程之后，我开始删除导入以查看是否可以阻止错误。

一旦我删除了仪表板组件，构建就开始工作了。我相信我的问题实际上是导入一个没有任何内容的 scss 文件。不知道为什么这会破坏事情，但你去吧。

【讨论】：