使用Dart-SASS编译时Webpack抛出多块错误

ycggw6v2  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(228)

我正在尝试在一个webpack项目中使用SCSS。从sass-loader的官方文档(你可以在这里看到:https://webpack.js.org/loaders/sass-loader/)我复制了配置文件。但是编译失败是因为Error: Conflict: Multiple chunks emit assets to the same filename main.js (chunks index and runtime)。更重要的是,即使我没有在index.js中导入SCSS文件,也会出现同样的错误。我没发现少了什么。
我的webpack.coinfig.js文件:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: './dist'
  },
  devtool: 'inline-source-map',
  optimization: {
    runtimeChunk: 'single'
  },
  // to use SASS
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ]
      }
    ]
  }
};

我所有的文件都在这个github仓库里:https://github.com/black-RAM/kajs-cooking

vc9ivgsu

vc9ivgsu1#

晚上我又回到这个问题上,意识到我犯了一个错误,忘记了实际安装样式加载器和css-loader。对于任何遵循指南的人,请注意它假设您已经安装了这些加载器,所以不要忘记。其次,我删除了优化属性。这就是解决构建错误的方法。希望这能帮助任何有同样问题的人。

相关问题