标签: postcss

我有这个源文件src/mike.js

import '@ckeditor/ckeditor5-ui/theme/globals/globals.css'
export default function () {
    console.log('Hello world');
} 

@ckeditor/ckeditor5-ui/theme/globals/globals.css看起来像这样：

@import "./_hidden.css";
@import "./_reset.css";
@import "./_zindex.css";

我有这个汇总配置：

import resolve from 'rollup-plugin-node-resolve';
import postcss from 'rollup-plugin-postcss'


export default {
    input: 'src/mike.js',
    output: {
        file: 'public/bundle2.js',
        format: 'cjs'
    },
    plugins: [resolve(), postcss({
        plugins: []
    })]
};

卷起来的样子public/bundle2.js是这样的：

'use strict';

function styleInject(css, ref) {
  // plugin function, removed for clarity
}

var css = "/*\n * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.\n * …

在我的 Webpack 配置中使用以下内容时：

{
  test: /\.scss$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: { importLoaders: 1 },
    },
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            [
              'postcss-preset-env'
            ],
          ],
        },
      },
    },
    "sass-loader"
  ],
},

我注意到有时像下面这样的 CSS 规则会从捆绑的 CSS 输出中删除。

img {
  margin-inline-end: 1rem;
}

删除上述 Webpack 配置时，将按预期应用上述规则。

进一步来说：

• 当元素[dir="rtl"]上设置了属性时html，margin-inline-end: 1rem;样式就存在
• dir当未设置该属性时，margin-inline-end: 1rem;捆绑输出中不存在该样式
• 当'postcss-preset-env'插件被删除时，margin-inline-end: 1rem;无论属性是否存在，样式都[dir]存在

是什么导致了这种行为？如何禁用它，同时继续用于postcss-preset-env其他事情，例如autoprefixer？

我一直在关注Tailwind 的教程。我进入教程的部分，他们要求我运行npx tailwindcss-cli build css/tailwind.css -o build/tailwind.css，我收到以下错误。我该如何解决这个问题？

(node:5568) ExperimentalWarning: The fs.promises API is experimental
/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/corePlugins.js:242
  ...Object.fromEntries(Object.entries(corePlugins).map(([pluginName, plugin]) => {
            ^

TypeError: Object.fromEntries is not a function
    at Object.<anonymous> (/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/corePlugins.js:242:13)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/USERNAME-REDACTED/.npm/_npx/8bcfa250e55e6bf5/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:36:43)
    at Module._compile (internal/modules/cjs/loader.js:778:30)

我尝试删除 npm、更新 npm、删除我的包锁和节点模块并重新启动，然后添加 -i。一切都没有占上风。从我链接的 YouTube 系列中可以明显看出，我只是在学习顺风，所以我确信这是一个超级愚蠢的错误。

我有这个组件，可以根据组件收到的道具颜色以不同的颜色显示。

const Card = ({color}) => {
  return (
    <p style={{color}}>Some Text</p>
  )
}

我有这些全局 css 变量：

:root{
    --bg-clr-1: #E7F8F8;
    --card-clr-red: #F03E3E;
    --card-clr-violet: #7950F2;
    --card-clr-green: #12B886;
    --text-clr: #333;
}

有没有办法将此 css 变量作为 prop 传递给“Card”组件？就像这样：

import variableStyles from '../../styles/globalVariables.css'

const App = () => {
  return(
    <Card color={variableStyles['--text-clr']} />
  )
}

我有一个 Vite React 项目，通过 PostCSS 使用 Tailwind。但是，没有一个类反映本地主机。以下是项目中的文件：

postcss.config.js：

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

tailwind.config.js：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

应用程序.js：

const App = () => {
  return (
    <div className="App">
      <h1 class="text-3xl font-bold underline">
        Hello world!
      </h1>
    </div>
  )
}
export default App

这一切都是按照 Tailwind 文档中的说明完成的，网址为https://tailwindcss.com/docs/installation/using-postcss。

为什么不起作用？

有人可以帮忙翻译 Tailwind.css 中括号的用法吗？

例1中：[&_*]是什么意思？
例 2 中：嵌套括号与 _& 组合意味着什么？

示例1：

    document.documentElement.classList.add('[&_*]:!transition-none')

示例2：

<LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />

我能得到的最接近的是[].css 的引用属性选择（一般而言），并且“普通”SASS 嵌套规则中的 PostCSS 处理使用 & 符号（由 postcss- nested提供的 tailwind 默认嵌套声明支持定义）。

将Webpack与postcss-loader结合使用以观察导入的css文件时遇到了一些麻烦.它们在第一次运行时被处理,但是当我修改这些文件时,webpack不会重新编译.

例如

我有我的主css文件,我导入所有的css模块:

...
/* Base imports */
@import "base/base-imports";
...

在基础导入中,为了示例,我为身体应用了一种颜色:

body {
  background: tomato;
}

我现在将背景设置为另一种颜色,以调试是否重新加载css文件,但不是.

这是我的webpack配置:

var webpack           = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')

var autoprefixer  = require('autoprefixer');
var precss        = require('precss');
var fontMagician  = require('postcss-font-magician');
var atImport      = require('postcss-import');



module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ],
  },
  postcss: function(webpack) {
    return [
      autoprefixer({ browsers: …

我想在我的节点应用程序中使用autoprefixer来编译css.为了我的特殊需要,我想调用autoprefixer没有回调或承诺.

很简单:

var result = autoprefixer.process(css);

要么

var result = myPrefixerWrap(css);

我有一段时间与之斗争,你能帮助我吗？

谢谢

ps:我已经尝试过postcss-js,但它会产生一个json对象用于反应,而不是纯css.例如{borderRadius:"5px"}

var prefixer    = postcssJs.sync([ autoprefixer ]);
var cssCompiled = postcss.parse(css);
var cssObject   = postcssJS.objectify(cssCompiled);
var autoResult  = prefixer(cssObject);

所以，

我已经将家庭课程附加到身体上，如下所示：

 document.body.classList.add("home")

我想通过选择appContainer身体类的子元素

html body.home #appContainer { ..... }

这在没有CSS模块的情况下有效，但是想知道如何在CSS模块中实现。谢谢

我现在正在努力让我的Spring Boot App再次运行几天......

我想将我的应用程序部署到Heroku,我得到了一个非常奇怪的错误:

Uncaught Error: Module build failed: TypeError: Invalid PostCSS Plugin found: [0]
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:32:17
at Array.forEach (native)
at plugins (C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:21:15)
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-config\index.js:64:18
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:32:17
at Array.forEach (native)
at plugins (C:\Entwicklung\git\Coinlender\node_modules\postcss-load-plugins\lib\plugins.js:21:15)
at C:\Entwicklung\git\Coinlender\node_modules\postcss-load-config\index.js:64:18
at Object.module.exports.createDebug.debug.createDebug.default (http://localhost:8080/vendor.dll.js:94862:7)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.module.exports (http://localhost:8080/vendor.dll.js:112728:15)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.defineProperty.value (http://localhost:8080/vendor.dll.js:94506:84)
at __webpack_require__ (http://localhost:8080/vendor.dll.js:21:30)
at Object.24 (http://localhost:8080/app/main.bundle.js:13268:42)
at __webpack_require__ (http://localhost:8080/app/manifest.bundle.js:694:30)
at fn (http://localhost:8080/app/manifest.bundle.js:115:20)
at Object../src/main/webapp/app/app.module.ts (http://localhost:8080/app/main.bundle.js:3641:1)

我用Google搜索并发现我的绑定可能不正确.所以我执行了

npm rebuild node-sass --force

为了正确设置它们.但这没有帮助.从那以后我收到了这个错误.

我还发现提示它与我的postcss.config.js有关,它是空的(它现在已经工作了6周).所以我添加了一些插件.它现在看起来像这样:

module.exports = {
  parser: require('postcss-scss'),
  plugins: …