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：意外的保留字

同样发生在postcss.config.js。

Webpack配置中缺少什么才能使其正常工作？

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

Answer 1

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

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