postcss 相关问题

PostCSS是一个使用JavaScript插件转换样式的工具。这些插件可以支持变量，混合，转换未来的CSS语法，内联图像等。

POSTCSS-IMPORT：/NODE_MODULES/TAILWINDCSS/lib/index.js:1:1：未知单词“使用严格”

tailwind-css postcss shadcnui tanstack

回答 1 投票 0

室/雨果 - 错误邮政编码：无法转换“/scss/main.css”（text/css）：错误：加载Postcss插件失败：找不到模块'autoprefixer'

hugo postcss autoprefixer postcss-cli docsy

回答 1 投票 0

StoryBook安装指南仅适用于tailwindcss v3，如何使用tailwindcss v4安装？故事书文档中的tailWindCSS安装部分迅速显示，它仅支持V3。 V4尚无官方安装指南。开始Storyboo ...

tailwind-css vite storybook postcss tailwind-css-4

回答 1 投票 0

如何修复尾风邮政插件错误？

reactjs tailwind-css postcss

回答 1 投票 0

NPXPostCSS：无法确定运行的可执行文件

node.js npm tailwind-css postcss npx

回答 1 投票 0

的原始文档，我已经安装了包裹，parwindcss， @tailwindcss/postcss。我的HTML标签看起来像这样：

，但是，当我用npx parcel index.html构建时。它将自动为其构建哈希，并生成像great_image.a187b2.png这样的文件。同时，与将自动更改为great_image.a187b2.png的链接不同，HTML文件的URL保持不变。在图像上引起404错误。解决此问题的另一种方法是使用普通CS而不是尾风，就像以下： <div class="backgroundimg">Some text...</div> <style> .backgroundimg { background-image: url(great_image.png); } </style> doing，因此构建器将将链接更改为文件名上的哈希。但是，我想知道有更好的方法吗？问题之所以出现，是因为tailwind无法自动将内线网址（bg-[url(...)]）自动更新为包裹生成的标签文件名。通过设计，它不扫描HTML代码，而仅在更换URL时CSS。如果您在CSS文件中使用@apply使用此tailwind CSS类，则可能会起作用，因为Tailwind可以在CSS内识别url(...)。但是，在这一点上，如果您只坚持问题中描述的本机解决方案，那并没有太大的区别。，您可以将图像URL存储在变量中，并在尾风CSS类中使用，例如： @layer base { --my-image: url(great_image.png); }  <div class="bg-[--my-image]">...</div>  <div class="bg-(--my-image)">...</div>

tailwind-css postcss parceljs

回答 1 投票 0

在tailwind CSS实施中，react app

I使用NPM的VITE@最新命令安装了React应用 NPM创建Vite@最新my-portfolio-- -template React 然后，我使用以下命令在'my-portfolio/'direc ...

reactjs npm tailwind-css vite postcss

回答 1 投票 0

带有邮政信箱和parwindcss的gatsby网站建筑物

reactjs frontend gatsby tailwind-css postcss

回答 3 投票 0

我如何在Svelte组件内使用parwindcss @Apply指令<style>

this this Works： </desc><code><div class="list p-2" /> </code><question vote="6"> <p>这个行不通：</p> <pre><code><style lang="postcss"> @tailwind base; @tailwind components; @tailwind utilities; @layer components { .list { @apply p-2; } } </style> </code></pre> <p>我看着Svelte的文档，但它用Sveltekit解释了我不使用的过程。我该如何使它起作用？</p> webpack.config.js：<pre> </pre><code>... module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader', 'postcss-loader'], }, </code><p> tailwind.config.js：</p> <p><code>module.exports = { purge: [ './*.html', './src/**/*.js', './src/**/*.svelte' ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } </code></p> <pre>postcss.config.js：</pre> <p><code>module.exports = { plugins: [ ['tailwindcss'], ['autoprefixer'], ], }; </code></p> <pre> </pre> <p>您需要安装</p><pre><code>svelte-preprocess</code></pre></question>并在webpack中使用它。<answer tick="true" vote="3"> <p>使用<a href="https://github.com/sveltejs/svelte-preprocess" rel="nofollow noreferrer"><code>svelte-loader</code><pre>提供了一个示例：</pre>：</a> <a href="https://github.com/sveltejs/svelte-loader" rel="nofollow noreferrer"><code>@import</code><pre> </pre>（您可能需要各种同行依赖项，例如</a><code>const sveltePreprocess = require('svelte-preprocess'); ... module.exports = { ... module: { rules: [ ... { test: /\.(html|svelte)$/, use: { loader: 'svelte-loader', options: { preprocess: sveltePreprocess({ postcss: true }) } } } ... ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), ... ] } </code></p>本身，并且取决于您使用的各种功能。）<p> <a href="https://github.com/sveltejs/svelte-loader#css-import-in-components" rel="nofollow noreferrer"> <pre> </pre>在某些情况下需要这个...</a> </p><code>postcss</code><pre> </pre> <p><pre>

javascript webpack tailwind-css svelte postcss

回答 0 投票 0

SASSERROR：@USE规则必须在任何其他规则之前编写。角

css angular typescript sass postcss

回答 1 投票 0

当我运行我的react-vite时，它说[插件：vite：esbuild]服务不再运行

运行NPM Run Dev后，它显示了这一点，并且我的配置文件已正确设置，尽管我也没有PostCSS的配置文件。这是我的vite.config.js：从'v ...

reactjs tailwind-css jsx vite postcss

回答 1 投票 0

TailWindPostCSS注入样式内联，而不是生成CSS文件

IAM使用PUG + Tailwind + Postcss用于使用基本NPM脚本生成的静态单页HTML文件（如下所示）我希望最终的HTML能够具有尾风样式夹住的可怕...

css pug tailwind-css postcss