postcss.config.js 的 es6 中的 'module.exports = {};' 是怎样的？

Question

我在 webapck2 中使用 postcss 加载器。加载程序需要一个配置文件 postcss.config.js。我不需要任何选择。这个问题评论 (https://github.com/akveo/ng2-admin/issues/604#issuecomment-271974780) 建议我可以简单地把它放在 postcss.config.js

module.exports = {};

但是当我运行 webpack (webpack -p --config webpack.config.js) 时，我收到了这些错误消息

ERROR in ./~/postcss-loader!./~/css-loader?{"modules":true}!./~/less-loader!./app/scripts/components/forms/form.less
Module build failed: Unknown word (1:1)

> 1 | exports = module.exports = require("../../../../node_modules/css-loader/lib/css-base.js")();
    | ^
  2 | // imports
  3 |

我认为这是因为我的 babel 加载器也适用于所有扩展名为 .js 的文件，并且 module.exports = {}; 可能没有被 babel 翻译好。

es6 中定义空模块导出的正确语法是什么？

如果我只是注释掉该行，我得到了同样的错误。

如果我将文件留空，然后 postcss 抱怨缺少配置文件：

ERROR in ./~/postcss-loader!./~/css-loader?{"modules":true}!./~/less-loader!./app/scripts/components/forms/form.less
Module build failed: Error: No PostCSS Config found in: /Users/antkong/dev/project/app/scripts/components/forms
    at Error (native)
    at /Users/antkong/dev/project/node_modules/postcss-load-config/index.js:51:26

我正在使用 postcss-loader 1.1.0 和 webpack 2.3.3

Answer 1

问题不在于配置，除非您先转译配置，否则您将无法使用 ES 模块。

您在 css-loader 之后应用了 postcss-loader，它生成了 JavaScript，但那是无效的 CSS，但这正是 postcss-loader 所期望的。 postcss-loader 应该在 css-loader 和 less-loader 之间。

您的 .less 规则如下所示：

{
  test: /\.less$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    },
    'postcss-loader',
    'less-loader'
  ]
}

或者如果您使用的是 extract-text-webpack-plugin:

{
  test: /\.less$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          modules: true
        }
      },
      'postcss-loader',
      'less-loader'
    ]
  })
}

postcss.config.js 的 es6 中的 'module.exports = {};' 是怎样的？

How is the equivalent of 'module.exports = {};' in es6 for postcss.config.js?

ecmascript-6

webpack

postcss

webpack-2