Webpack 2 - 导入在 postcss.config.js 和其他 js 文件上引发错误

Question

我有一个包含 Webpack 2、PostCSS、ES2015 (Babel) 和 Jest 的项目。

现在，所有 ES2015 都在 src/index.js 上正常工作，文件直接连接到 src/index.js。

但在某些文件中它会破坏代码。例如，在mixins/index.js，我有这个：

const postcss = require('postcss');

当我把它改成这样时：

import postcss from 'postcss';

它会抛出这个错误：

模块构建失败：SyntaxError: Unexpected reserved word

postcss.config.js 也是如此。

我在 Webpack 配置中缺少什么以使其正常工作？

您可以查看repository here。这些是我谈到的文件：postcss.config.js 和 mixins/index.js

Answer 1

PostCSS 要求您的文件位于专用 CSS 文件中，而不是像在您的项目中那样位于 *.js 文件中。

如果你想在 JavaScript 中使用 PostCSS（比如 ReactJS 内联样式），你需要 postcss-js 解析器，它需要额外的 loader 和像 *.style.js 这样的命名样式，这样 webpack 就不会混淆 JavaScript带有通过 Babel 处理的常规 JavaScript 文件的样式。