1

我在一个角度项目中的 webpack 3 中使用 css loader 和 post css loader。当我构建我的应用程序时，我的所有 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”

“网络包”：“3.6.0”

4

1 回答 1

1

PostCSS 和 Webpack

请原谅我的话，但是您的配置有严重问题，我是React开发人员，但是Webpack配置不依赖于Angular或React其他东西，但是为什么您的fallback内部没有rules？

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

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

于 2018-01-15T15:00:40.400 回答