问题标签 [postcss-import]

我试图让 PostCSS 为不同的媒体查询导入不同的文件，但是没有执行带有媒体查询的导入。

其他进口工作正常，但其中的进口不进口。

例子

最终被加工成

如果我将导入带到导入之外，则可以正常导入。%}

最终成为

我的 postcss 配置：

console.log("CSS 改变了。处理中...");

报告的输出没有提到这一点（只有一些空进口）。是否有关于从媒体查询中导入的插件或规则我没有看到？

我有以下配置，其中有一个 EventInfoCard。当它处于预加载状态时，它会渲染一个不同的组件，该组件从父级继承了很多 CSS。我正在使用postcss-cssnext变量，而这个 composes 函数似乎与css-loader.

EventInfoCard.css

EventInfoCardPreloading.css

虽然现在它似乎引入了 EventInfoCard CSS 而没有转换变量，最终得到这个无效的 CSS，如下所示。那么我做错了什么？我认为composes只会获取类名而不带入文件。

postcss配置：

webpack 加载器配置：

我正在创建一个CSS 库，我想像 RxJS 一样支持子包。例如，使用 RxJS，我们可以像这样导入整个厨房水槽（取自https://www.npmjs.com/package/rxjs）：

或者像这样的个体运营商：

我最初的观察是，这可能就像将模块打包到根模块的子文件夹中一样简单。例如RxJS node_modules安装文件夹有一个子文件夹rxjs/add/observable，其中包含所有可观察的扩展，如zip.js, throw.js...等。

因此，遵循这种模式postcss-import可以扩展以以相同的方式解析子模块文件夹中的导入。例如：

• @import @superflycss/utilities-layout/margins

将导入node_modules/superflycss/utilities-layout/margins.css，如果不存在，它将查找node_modules/superflycss/utilities-layout/margins/index.css，如果不存在，则会引发错误。

• @import @superflycss/utilities-layout/margins/

只会进口node_modules/superflycss/utilities-layout/margins/index.css。

我正在生产的模块将厨房水槽打包在目录中target/main/css/index.css。这会公开所有 css 实用程序或组件（取决于它是什么类型的模块）。

问题是，与 RxJS 一样，这可能是一个非常重的文件（例如，包含对所有 Google 字体的导入）。

所以我希望通过遵循 RxJS 方法，通过遵循 NodeJS require.resolv() 算法使用的相同规则，整个事情变得更加灵活和标准化。想法？

我正在尝试更新我的 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 的过时建议。任何建议都会非常棒。

我正在尝试使用 Gulp 用 PostCss 转换我的 css。

当我将 cssnext 插件添加到 PostCss 时，出现以下错误：

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.19, but postcss-import uses 4.1.16. Perhaps this is the source of the error below.

这是我的gulpfile.js：

完整的堆栈跟踪：

据我所知，postcss-import 包是 cssnext 的一个依赖。所以我该怎么做？

我使用 Angular Material 6 创建了一个自定义主题。当我在 styles.css 中导入主题时，出现错误：

./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css) 模块构建失败：错误：无法解析'@angular 'C:\Users\D3L1ghT\Documents\PROJECTS\social-network\techhub\src' 中的 /material/theming'

这是我的 my-theme.scss 代码：

这是styles.css的代码：

这是 angular.json 的截图：angular.json

我正在尝试将 webpack 与 postcss 一起使用来导入包含我的 css 自定义变量的 theme-variables.css 文件。

基本上我希望任何导入主题变量的 css 都能够访问这些 css 自定义属性并使用 postcss-css-variables 解析为静态值。

变成

但是我不断收到 webpack 错误variable --babyBlue is undefined and used without a fallback

main.js 最终看起来像这样：

这是我的 webpack（index.js 需要 styles.js）：

我的问题是更多的方法。我有一个只使用 css 的项目，带有 css 自定义属性。vars例如。这个项目是反应，启用了 css 模块。具有如下结构：

component -- folder1 ---- folder1.css -- folder2 ----folder2.css node_modules -- module1 ---- module1.css

在本地项目中，我有 webpack，带有 postcss 加载器和以下插件：

在本地component和node_modules *.css文件中都有:root定义。为哪些变量设置。

例如，我有一个颜色文件，其中定义了所有颜色变量。

我的目标是在开发和生产中，我都var()输出了 IE 11 的值。所以让我们说颜色是var(--color-black)它会输出color: #000& color: var(--color-black)。

发生的事情是我必须在每个模块中导入后备才能出现。这仅适用于组件下的本地 css 文件，而不适用于 node_modules。:root这也多次应用相同的值。

我正在寻找的是其他人可能已经使用最少数量的 postcss 配置来实现在 IE 11+ 中工作但仍然只允许编写未来 css 的东西。

任何帮助，将不胜感激。

我的 Nuxt 项目没有从 nuxt.config.ts 获取 postcss-import 的配置：

我收到类似的错误Error: Can't resolve 'style.css' in /projectroot/pages。

相同的配置postcss.config.js被正确拾取。为了测试，如果我将 postcss.config.js 更改为指向不存在的目录，则错误变为：Error: Failed to find 'style.css' in [list of configured directories].

我应该怎么做才能让这个从 nuxt.config.ts 工作？请注意，我使用的是 Typescript (nuxt-ts)。