我有一个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'
})
]
})
这已经让我发疯了几个小时,任何帮助或见解将不胜感激。谢谢。
答案 0 :(得分:0)
经过一遍又一遍又一遍又艰苦的重新格式化webpack的过程之后,我开始删除导入内容以查看是否可以停止该错误。
一旦我删除了仪表板组件,构建便开始起作用。我相信我的问题实际上是由于导入了一个没有任何内容的scss文件。不知道为什么那会破坏事情,但是你走了。