使用 webpack 构建时出现“类型错误:弱集中使用的值无效”

新手上路,请多包涵

我正在尝试将 scss 添加到项目中。我想从 scss 文件构建 css 文件,但自从我添加了 MiniCssExtractPlugin 后,我收到一条错误消息,提示“类型错误:弱集中使用的值无效”。这是我的 webpack.config.js

 const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
  // TODO: Add common Configuration
  module: {},
};

const js = Object.assign({}, config, {
  name: 'js',
  entry: path.resolve(__dirname, 'index.js'),
  output: {
    path: path.resolve(__dirname, '../some/path/here'),
    filename: 'main.js',
  },
});

const scss = Object.assign({}, config, {
  name: 'scss',
  entry: path.resolve(__dirname, './scss/styles.scss'),
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(s*)css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ],
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, '../some/path/here'),
    filename: 'styles.css',
  },
});

module.exports = [js, scss];

我用谷歌搜索了很多但没有找到任何答案。我使用 Node.js v 8.4.0。

控制台输出(还有更多,但我认为这已经足够了):

 TypeError: Invalid value used in weak set
    at WeakSet.add (native)
    at MiniCssExtractPlugin.apply (/path/path/path/path/path/path/path/node_modules/mini-css-extract-plugin/dist/index.js:362:18)

PS:我是 webpack 的新手,所以如果你能帮助我改进这段代码,我会很高兴。主要思路是保持js编译不变,增加scss编译。我还想将包含的 scss 文件编译为单独的文件。

PSS:如果您需要更多信息,我会提供一些,因为我知道还有什么有用的。

原文由 Yevhenii Shlapak 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 515
1 个回答

也许最新的 mini-css-extract-plugin 版本有错误。我尝试使用这个包的另一个版本。它的工作!

  1. 删除你的最后一个包版本:
     npm uninstall mini-css-extract-plugin

  1. 下载此版本 0.9.0(对我有用):
     npm i --save-dev mini-css-extract-plugin@0.9.0

*可选(–save-dev)

检查所有版本: mini-css-extract-plugin/all-versions

原文由 Ayub 发布,翻译遵循 CC BY-SA 4.0 许可协议

推荐问题