使用 Webpack 通过终端启动来编译 SCSS 时，为什么会收到错误“字段浏览器不包含有效的别名配置”？

Question

这是我第一次使用 webpack 来编译我的 scss。我正在尝试启动它，但出现错误。它说：

Field 'browser' doesn't contain a valid alias configuration

并且：

Module not Found: Error: Can't resolve './src'

此外，以红色显示，它将用/index doesn't exist(.js / .json / .wasm) 记录我的文件目录。这是我当前的webpack.config.js文件：

module.exports = [{
entry: 'mat-design.scss',
output: {
  filename: 'style-bundle.js',
},
module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'styles.scss',
          },
        },
        { loader: 'extract-loader' },
        { loader: 'css-loader' },
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
            mode: development,
            webpackImporter: false,
          },
        },
      ]
    }
  ]
},

}];

任何帮助将非常感激。

Answer 1

看起来您缺少解析模块来通知 webpack 当您的文件名没有扩展名时要查找什么文件类型

将以下块添加到您的配置中

module.exports = [{
    entry: 'mat-design.scss',
    (...)
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.css', '.scss'],
        modules: ['src', 'node_modules'] // Assuming that your files are inside the src dir
    }
}]

参考 - https://webpack.js.org/configuration/resolve/