标签: postcss

目前我有以下 webpack 配置，工作正常：

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
        flexbox: 'no-2009',
      }),
    ],
  },
},

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

我的 webpack 配置变成：

{
  loader: require.resolve('postcss-loader'),
  options: {
    ident: 'postcss',
    config: {
      path: './postcss.config.js'
    },
  },
}

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

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'autoprefixer': {
      browsers: [
        '>1%',
        'last 4 …

我正在尝试安装 Tailwind 来练习一些基本的东西来了解这个框架是如何工作的。我遵循了框架创建者 Adam Wathan 提供的每一步，在运行时我遇到了命令行错误：您必须传递一个有效的文件列表来解析。我在定义顺风自定义标记时也遇到了一个错误

@tailwind base;
@tailwind components;
@tailwind utilities;

首先它在规则@tailwind 上说未知，然后在安装 stylelint 并按照 @hasusuf 回答之后

出现另一个错误！

并且相同的命令错误仍然存​​在。

有什么帮助吗？

所以今天我一直在尝试将 postscss-loader 从 3.0.0 版本迁移到 4.0.2

我注意到从 4.0.0 版开始，他们添加了 postCSS 作为对等依赖项，所以我添加了 postcss 7.0.27 版。我没有选择 8，因为我也使用了“postcss-import”，这依赖于版本 7。这应该没问题，因为 postcss-loader 可以同时使用版本 7 和 8。

但是现在在运行时，我收到了所有 scss 文件的相同错误消息：

Error: [object Object] is not a PostCSS plugin

由于消息不是真正的描述性，解决问题已成为一种真正的试错方法。到目前为止没有成功。

这是我的 webpack.config.ts：

import postCSSImport from 'postcss-import';
import autoPrefixerFlexbox from 'postcss-flexbugs-fixes';
import autoPrefixer from 'autoprefixer';

const BrowserList = {
    mobile: ['android >= 4', 'ios >= 8'],
    desktop: ['firefox >= 40', 'chrome >= 49', 'edge >= 12', 'opera >= 47', 'ie >= 11', 'safari >= 9'],
    designer: ['firefox >= …

我使用 Tailwind 设置了 Webpack，除了清除之外，一切似乎都运行良好。该文件为 4mb，我可以在其中看到所有的顺风实用程序类。在过去的 30 分钟里，我试图找到解决方案，但没有任何效果。

这是我的 package.json 脚本“build”和所有依赖项：

{
 "name": "MemeGenerator",
 "version": "1.0.0",
 "description": "",
 "private": true,
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --config webpack.prod.js",
   "watch": "webpack --watch --config webpack.dev.js"
 },
 "repository": {
   "type": "git",
   "url": "git+https://github.com/MB9900/MemeGenerator.git"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "bugs": {
   "url": "https://github.com/MB9900/MemeGenerator/issues"
 },
 "homepage": "https://github.com/MB9900/MemeGenerator#readme",
 "devDependencies": {
   "autoprefixer": "^10.2.5",
   "css-loader": "^5.1.3",
   "html-webpack-plugin": "^5.3.1",
   "postcss": "^8.2.8",
   "postcss-cli": "^8.3.1",
   "postcss-loader": "^5.2.0",
   "style-loader": "^2.0.0",
   "tailwindcss": "^2.0.3",
   "webpack": "^5.26.0", …

我需要配置 rollup-plugin-postcss 以仅修改某些文件的 CSS 类名称。我知道这对于 WebPack 是可能的，但我不知道如何使用 Rollup 来做到这一点。理想情况下，我想给出一个正则表达式来描述如何处理符合该条件的 CSS 文件。

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

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import babel from "rollup-plugin-babel";
import sourcemaps from "rollup-plugin-sourcemaps";
import postcss from "rollup-plugin-postcss";
import static_files from "rollup-plugin-static-files";
import image from "@rollup/plugin-image";

export default {
  input: "src/index.ts",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: "es",
      sourcemap: true,
    },
  ],
  plugins: [ …

我想将 tailwindcss 添加到新的 Rails 5.2.5 项目中。因为我喜欢顺风但知道它的重量，我也想要一个清除CSS模块。

我遵循了几个设置指南以及官方文档的说明。我还尝试通过gems安装tailwind（https://github.com/rails/tailwindcss-rails，https://github.com/IcaliaLabs/tailwindcss-rails ） ，但由于所有解决方案都基于rails 6作品。我也不知道 webpack 实际做了什么，所以我宁愿不使用它，而是通过资产管道使用 tailwind，而且还进行类清除。

我在构建过程中有点迷失。有没有关于如何在 5 号铁轨而不是 6 号铁轨设置顺风的方便指南？我真的很喜欢大多数宝石的自动方法，但找不到方便的解决方案。

谢谢你！

我正在做我认为标准的 Next.js 构建。它在开发模式下工作正常，但当我尝试获得生产版本时，我得到：

(node:39333) UnhandledPromiseRejectionWarning: CssSyntaxError: <css input>:17:20: Missed semicolon\nat Input.error (/node_modules/next/node_modules/postcss/lib/input.js:129:16)\n

但奇怪的是：我没有\xe2\x80\x99t 有任何CSS。

实际上，我有一些 CSS，但我将其全部删除以找出问题所在。不用找了。

我正在使用 typescript + vue 3 开发 google chrome 扩展，当我构建我的应用程序时，显示如下错误：

Error: Module build failed (from ./node_modules/vue-loader/dist/stylePostLoader.js):
Error: PostCSS received undefined instead of CSS string

这是package.json：

{
  "name": "reddwaf-translate-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js",
    "build": "gulp --cwd . --gulpfile build/gulp-build.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jiangxiaoqiang/reddwaf-translate-plugin.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin/issues"
  },
  "homepage": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin#readme",
  "devDependencies": …

将新的前端堆栈（Vue3、Tailwind CSS）引入到已经建立的应用程序中。

旧堆栈具有依赖项，其中包括与 Tailwind 冲突的 CSS 类。

最终目标是仅使用Vue 和 TailwindCSS，所以我不想在开发过程中使用前缀，因为它没有必要......但我需要支持旧的和新的堆栈，直到我能够完全删除旧的CSS。

我知道在 TW 配置 ( prefix: 'tw-',) 中使用了 prefix 属性，但这意味着源 .vue 文件将需要使用该前缀。

我是否可以仅在构建期间（使用 Vite）告诉 Vue 向所有类添加前缀，然后同样在构建期间将规则传递给 Tailwind 仅添加前缀（但在开发期间不需要）？

我看到一个类似的问题，其中的答案提到如果TW中存在这种情况，那么TW如何知道哪些要转换，哪些不转换...我理解这一点，但在我的场景中我没有其他插件。

我简单浏览了一下postcss-prefixer，但不确定这是否是我需要的......

我想我可以使用 TW 前缀，因为它不是世界末日，但对我的最终目标来说感觉很脏......

我有一段用PostCSS设置样式的代码。现在，我想在不使用PostCSS插件的情况下在“普通” CSS中实现相同的效果。这可能吗？如果可以，怎么办？

这听起来像是一个愚蠢的问题，但是我是HTML / CSS的新手

代码在Codepen上：https ://codepen.io/MightyFool/pen/jLKVqQ

这是HTML：

<p>
  "Attractive things make people </a> <a class="link-1" href="#">feel good</a>, which in turn makes them think more</a> <a class="link-1" href="#">Creatively</a>. How does that make something easier to use? Simple, by making it easier for <a class="link-2">people</a> to find solutions to the problems they encounter." <strong>- Don Norman</strong>
</p>\

这是PostCSS CSS：

@use postcss-simple-vars;
@use postcss-nested;
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

$underlineColor: #00458D;
$underlineHeight: 1px;

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Open Sans', …