使用 webpack 3 后 css 加载程序出错答案

【问题标题】：Error in post css loader with webpack 3使用 webpack 3 后 css 加载程序出错
【发布时间】：2018-06-05 03:03:02
【问题描述】：

我在 Angular 项目的 webpack 3 中使用 css 加载器和 post css 加载器。当我构建我的应用程序时，我的所有 css 文件都出现以下错误：

    ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/XXX/XXX/xxx.css
Module build failed: TypeError: WeakMap: incorrect invocation!
at TypeError (native)
at module.exports (/home/anil/projects/expertly/client/webapp/node_modules/core-js/modules/_an-instance.js:3:11)
at /home/anil/projects/expertly/client/webapp/node_modules/core-js/modules/_collection.js:59:9
at new WeakMap (/home/anil/projects/expertly/client/webapp/node_modules/core-js/modules/es6.weak-map.js:17:12)
at e (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:36380)
at Object.<anonymous> (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:27033)
at e (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:129)
at Object.module.exports.Object.defineProperty.value (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:40119)
at e (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:129)
at Object.<anonymous> (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:149384)
at e (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:129)
at /home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:486
at /home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:1:497
at makeLoaderFunction (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:36:3)
at Object.<anonymous> (/home/anil/projects/expertly/client/webapp/node_modules/@std/esm/index.js:40:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (/home/anil/projects/expertly/client/webapp/node_modules/coffee-script/lib/coffee-script/register.js:45:36)

这是我的 css 加载器的 webpack 配置：

  {
      test: /\.css$/,
      use: [
        'to-string-loader',
        { loader: 'css-loader' },
        'postcss-loader' 
      ],
      exclude: [
        path.join(__dirname, "../node_modules"),
      ]
    }

postcss.config.js：

module.exports = {
  plugins: {
  'autoprefixer': { browsers: 'last 2 versions' },
  'cssnano': {
    safe: true,
    sourcemap: true,
    autoprefixer: false
  },
  'postcss-import': {
    addDependencyTo: webpack
  },
  'postcss-cssnext': {}
  }
}

使用的版本是：

"postcss-loader": "2.0.7"

“webpack”：“3.6.0”

【问题讨论】：

阅读我的答案，它有一个指向我的样板的链接。查看它并将其与您的配置进行比较。毫无疑问它可以帮助你。

标签： javascript angular webpack css-loader postcss-loader

【解决方案1】：

PostCSS 和 Webpack

对不起，您的配置有严重问题，我是React Developer，但Webpack 配置不依赖于Angular 或React 或其他东西，但是为什么你没有fallback 在你的 rules 里面？

为什么不使用 ExtractTextPlugin ？当你想玩PostCSS 时为什么要使用CSS 扩展文件？和其他东西，比如分离的PostCSS 文件？为什么？

我建议您查看我的 PostCSS configuration on Webpack 并将其与您的配置进行比较，我的样板工作很棒，它使用反应，没关系，Webpack 版本是 3.x 和 PostCSS 版本是 6.0.x 和postcss-loader 版本2.0.x。特别是我将Webpack 的开发和生产版本分开。它易于理解，清晰明了。如果您有其他问题，请提出，我很乐意回答。

【讨论】：