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

Posted 2023-03-07

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

【英文标题】：Webpack 2 - import throws error on postcss.config.js and other js files

【发布时间】：2017-08-04 04:19:21

【问题描述】：

我有一个包含 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

【参考方案1】：

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

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

【讨论】：

如果你查看我的webpack.config.js，你会发现她是那里的装载机。

嗯，但我想用 js 编写 mixins 以访问 js 功能，在这种情况下，也使用 es6，这就是我要在这里完成的工作

也许free-style 是您要找的？自己没有尝试过，但是 postcss-js 承诺可以使用它。

并非如此。我很确定它就像我所拥有的一样，我已经看到另一个使用 ES6 的私人项目。唯一缺少的是 webpack 配置上的东西

问题是你没有说出你想要达到的目标。 JavaScript 中的 CSS 是一项可与 ReactJS 等技术一起使用的功能 - 但不能单独使用。这使得在这里帮助你真的很困难......