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

Question

这是我第一次使用Webpack来编译我的scss。 我试图启动它，但是出现了错误。 它说：

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

并且：

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

此外，红色部分将记录我的文件目录，其中/index不存在（.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,
          },
        },
      ]
    }
  ]
},

任何帮助都将不胜感激。

- Ben

---

你解决了这个问题吗？怎么解决的？我也遇到了类似的问题：https://dev59.com/V28NtIcB2Jgan1znlJD_ @Ben - Dolphin

@Dolphin 很遗憾，我无法使用这个webpack。我只是用Grunt来编译SCSS，效果很好。 - Ben

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/

（该网页是有关Webpack解决模块依赖的配置说明文档，提供了一些配置选项和示例。）

- Danny Matthew

---

我尝试了，但似乎在我的情况下没有起作用。@Danny Matthew - Dolphin

Danny Matthew，如果我的文件位于一个名为“src”以外的文件夹内，我应该添加哪个选项？ - user36339