问题标签 [postcss-loader]

配置

webpack.config.js

postcss.config.js

包.json

附加信息

问题

运行此配置时，我没有收到错误。它就像 postcss-loader 不存在一样运行，并给了我普通的 css。我正在尝试运行发布在autoprefixer 站点上的基本示例

我正在尝试更新我的 webpack 构建以利用 postcss 和 postcss-loader。但是我在加载字体、图像等时遇到问题。

例如尝试导入字体真棒。

这是我在 postcss 之前的设置，它有效：

CSS：

webpack.config：

试图移动到这个：

带有 postcss 的 webpack：

但是，当我这样做时，会出现如下错误：

./style.css 中的错误模块构建失败：ModuleNotFoundError：找不到模块：错误：无法解析“/test-project/public”中的“../fonts/fontawesome-webfont.eot”

我也尝试了其他一些库（即引导程序、传单）并且遇到了同样的问题。

我正在开发一个项目，我正在开发一组 UI 组件供开发人员用来构建他们的网站。我创建了一个 NPM 包，它只包含实现 Accordion 组件所需的 CSS。

我通过 npm install 将我的 css-accordion-component 作为开发依赖项安装到使用 create-react-app 创建的 React 项目中。我在 React 项目中的 Accordion.js 文件从 node_modules 导入 css-accordion 包，如下所示：

这确实将样式带入了我的项目，但文件中定义和使用的 CSS 变量都没有解析。CSS 文件如下所示：

我相信这可能是因为使用 create-react-app 构建的 React 项目没有通过它的 post-css 插件运行这个导入的 css 文件。网上似乎有很多关于如何正确配置 Webpack 以使用 PostCSS 的过时建议。任何建议都会非常棒。

目前我有以下 webpack 配置，效果很好：

由于我在多个地方使用了 postcss 配置，因此我想将它集中在一个postcss.config.js文件中。

我的 webpack 配置变为：

我的 postcss.config.js 文件位于同一个配置文件夹中，如下所示：

现在构建仍在工作，但似乎 postcss 配置被忽略（当我检查 css 时，供应商前缀不再存在）。我在这里错过了什么吗？postcss 文档不是很有帮助...

我正在使用带有 scss 合成器的 postcss 来组织项目中的样式。简化结构如下：

Webpack 加载器的入口点是 client/styles/index.scss。

如果我用 url() 语句和 image.png 的相对路径定义一些样式 - 比如 index.scss 中的 url('../media/images/image.png') （例如 - 在 background-image 属性中），它将得到很好的解决。

但是，如果我在嵌套样式文件中做同样的事情 - styles/components/component1.scss - 由 index.scss 导入的 url('../../media/images/image.png') - Webpack 将抛出错误：

似乎加载器使用条目样式文件路径处理所有嵌套文件中的相对 url。如何改变这种行为？

我试图找出 postcss-loader 有什么好处。

在 github 页面上

https://github.com/postcss/postcss-loader

它说：

使用 PostCSS 处理 CSS 的 webpack 加载器

我不明白：那么，PostCSS 是用 PostCSS 处理 CSS 的 WP-Loader 吗？

恕我直言，这是一个循环定义。

那么什么是 PostCSS，它是一个 CSSLoader 吗？或者，既然它被称为Post CSS，它是一个在其他 CSS 加载器之后运行的加载器吗？

我正在尝试根据教程学习​​ reactjs。同时教程指导使用 webpack 编译样式表和 JS 资产。我陷入了一个错误，即样式表无法编译并在使用 webpack 编译文件时引发以下错误。它显示以下错误：

我已经按照教程完成了所有工作，但不知何故，这个错误仍然存​​在并且无法解决这个问题，因为我对此很陌生。我的 webpack 配置文件 webpack.config.js 如下：

我正在使用Webpack、Extract Text Plugin和PostCSS来生成我的 CSS 包。我使用Html Webpack Plugin生成index.html文件。这是我的webpack.config.js：

我的postcss.config.js：

我设置了 RGBA 和不透明度选项来复制原始规则。我尝试对 UnMQ 做同样的事情（postcss 删除 IE 的媒体查询），但找不到任何复制原始媒体查询的选项。我也尝试禁用它：

除非我从postcss.config.js. 现在我想尝试为 IE 生成一个单独的 CSS 包，并将其包含在index.html类似于Oldie网站上给出的示例中：

如果这是不可能的，请提出另一种方法，我可以让 Oldie 为 IE 工作，但不影响支持它的其他浏览器的媒体查询。

这是我Webpack的scss/css文件配置。

问题是当我使用cssnext类似gray(100)的函数时，输出CSS文件在放置函数的位置有一个空值。我想知道我在这里做错了什么。

即 background-color: gray(100);输出到background-color: ;

我是 postcss 的新手，所以我还不知道它是如何工作的或如何正确配置它。

我刚刚升级到 webpack 4。我使用 css 模块。

错误：

./client/src/common/accordian-component/accordian.css 中的错误 (./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5- 2!./client/src/common/accordian-component/accordian.css）模块构建失败：TypeError：无法读取对象未定义的属性“上下文”。(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:101:57) 在 Array.map () 在 Object. （/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:99:31）位于 /Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/processCss。 js:200:3 来自上一个事件：在 Promise.then (/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/cls-bluebird/lib/shimMethod.js:38:20) 在 Object.

webpack.config.js