问题标签 [postcss-import]

我正在尝试为包括 tailwindcss v1 和 postcss-import 的 react-static 站点设置启动器。我无法获取构建或启动进程来解析 @import "tailwindcss/xxx" 指令。我使用 tailwindcss v0.7.4 得到相同的结果

这就是我所做的......

1. react-static create选择basic选项
2. yarn add tailwindcss@next
3. yarn add postcss-import
4. yarn tailwind init
5. 添加postcss.config.js
6. src/app.css用 3 个@import语句替换了的内容

我尝试了许多选择，例如从其他现有项目开始，更改@import参数。例如"../tailwindcss, "src/tailwindcss,"../src/tailwindcss等

基本上我所做的一切都没有改变错误，只是无法解析的文件名。

但是，还有 2 个额外的观察结果可能是相关的。首先，安装npx tailwind build src/styles.css -o src/app.css了 tailwind 并从styles.css.

其次，postcss-import 根本没有发生——改变它对结果没有影响。

错误信息是

我预计开发服务器会在源处理完毕后启动。

完整源代码可在https://gitlab.com/support96/my-static-site.git

我正在使用带有 Webpack 4 的 React。我正在尝试将 BassCSS 类导入我的index.css：

但是，似乎没有应用导入。Webpack 不会抛出任何错误消息或警告。

例如，BassCSS 类red不会使我的标题文本变为红色：

在我的index.cssindex.js 中导入：

如果我注释掉我的导入并red像这样手动定义类，它会使我的标题文本变红：

使用webpack，我已经配置了CSS 文件的style-loader、css-loader和：postcss-loader

这就是我的postcss.config.js样子：

最后，我的依赖项来自我的package.json：

问题

最近我在一个 React 项目中从不推荐使用的 CSS Module 切换react-css-module到babel-plugin-react-css-modules使用 CSS Module 并遇到无法解析使用@import statements(with postcss-import) 导入的 CSS 文件中的样式声明的问题。我想知道这是一个已知问题还是这些插件的配置中缺少什么？

该场景是使用通过多个​​ CSS 文件以传递方式 -ed声明tabs.jsx的类：utilities.css@import

这将导致使用 webpack 在捆绑阶段出错：

调试

添加一些调试语句，getClassName.js显示来自的类声明@import永远不可用，因此抛出上面的错误。

设置

以下是依赖项：

中的设置postss.config.js：

中的设置webpack.config.js：

在.babelrc：

以前我用的react-css-module时候，从来都不是问题。所以也许它特定于较新的babel-plugin-react-css-modules或与的兼容性postcss-import？任何有关如何解决此问题或帮助的方向都将不胜感激。谢谢。

我需要从数据库中获取一些颜色值并在我的 CSS 中使用它们，以便每个客户都有我的 React.js 应用程序的颜色品牌版本，但我不确定如何。

我还有其他品牌元素，例如徽标、标语和术语，我将它们从数据库中提取出来，存储为 JSON 文件，并在网站周围进行引用，这很好用，但问题是我需要使用的颜色在我的样式表中，因为我需要使用 CSS 提供的伪类。

我发现这个postcss-import-json包声称可以做到这一点，但我似乎无法让它按预期工作。

到目前为止，我...

• 导入包... npm install --save-dev postcss-import-json

• 创建了一个名为“masterConfig.json”的 JSON 文件

• 使用我称之为颜色（主要）的名称将上述文件导入到我的主样式表中...... :root { @import-json "../Assets/MasterConfig/masterConfig.json" (primary); }

• 将上面的颜色名称添加到我的颜色列表中... :root {primary: primary} 我也尝试过使用--前缀更改为@import-json... (primary as primary prefix --)

• ...并将其添加到我要使用的代码中... style={{background: "var(--primary)"}} ^^^ 带和不带前缀

难道我做错了什么？我注意到在示例中它使用了$符号，那么这只能与 SCSS 一起使用吗？

对此的任何帮助，或任何其他方式来实现这一点都会很棒，谢谢！

我创建了我的第一个 npm 包。我在npmjs上发布，在项目中安装包并运行后遇到了缺少'postcss-import'模块的错误。告诉我，问题可能出在哪里，在哪个文件中？我尝试了所有方法，但没有任何效果。也许这些文件有问题？

这是我的包的“package.json”文件

这是我的包的“.postcssrc.js”文件

这是我的项目结构：

当我尝试使用 yarn 编译或构建项目时，它失败了，因为它在 node_modules 中找不到 scss 文件：

其实scss文件退出了：

该文件属于角度弹性布局

下面是app.components.scss试图使用layout-bp谁属于@angular/flex-layout/mq

我认为问题是因为它试图在文件位于src/app/时在其中找到 mq.scss 文件node_modules

要运行我使用的项目yarn start:consumer或yarn start 此命令执行以下操作： 1) 构建项目。2）运行文件dist夹中的文件：node dist/app.js

下面我复制postcss.config.js, webpack.config.js,webpack.common.js和.webpack.dev.jspackage.json

postcss.config.js

webpack.config.js

webpack.common.js

webpack.dev.js

包.json

使用 Webpack 和 PostCSS 环境，我想在我的 Components 文件夹和子目录中导入所有 CSS 文件。我已经尝试过 PostCSS 插件 postcss-easy-import 和 postcss-import 并且知道它们都需要先来。具有直接路径的常规导入工作，可能是 ** 占位符不起作用？

提前致谢

我正在使用带有 laravel mix 和 postcss 的顺风。我得到错误：

@apply不能与 with 一起使用，.text-grey-default因为.text-grey-default要么找不到，要么它的实际定义包括一个伪选择器，如 :hover、:active 等。如果您确定.text-grey-default存在，请确保在Tailwind CSS 看到您的之前@import正确处理任何语句CSS，as只能用于同一 CSS 树中的类。@apply

我认为这是因为不在同一个 CSS 文件中，但我正在使用 postcss-import 来克服这个问题。标签正文没有任何伪选择器，所有的导入都在文件的顶部。我真的无法理解这个问题来自哪里以及如何解决它。

应用程序.scss

webpack.mix.js

tailwind.config.js

我正在使用 TailwindCSS 和 PostCSS，我有这个 css 代码：

PostCSS（或使用插件）中是否有本机方式来编写如下代码？

我正在尝试探索 Tailwindcss 并希望将其添加到新的 Wordpress 项目中。我正在使用 Laravel Mix 来编译资产。

设置完所有内容并运行“npm run dev”后，我收到以下错误：

./assets/src/main.css 中的错误模块构建失败（来自 ./node_modules/css-loader/index.js）：ModuleNotFoundError：找不到模块：错误：无法解析 './node_modules/tailwindcss/base. css'在...

我当前的设置基于这篇文章： https ://paulund.co.uk/using-tailwind-css-in-your-wordpress-theme

这是我的 package.json 的代码

这是 webpack.mix.js 的内容

和 main.css：

任何想法如何解决这个问题？高度赞赏所有帮助。