标签: postcss

从 github 克隆我的存储库，就像在新机器上工作一样，安装了我的项目的所有依赖项，但抛出了此错误，并且不确定发生了什么或如何修复它。已尝试卸载所有节点模块并重新安装。按照建议将 postCSS 重新安装到版本 8。有任何想法吗？

错误

 ERROR  Failed to compile with 1 error                                                 17:43:02

 error  in ./src/index.css

Syntax Error: Error: Loading PostCSS Plugin failed: Invalid or unexpected token

(@/home/project/postcss.config.js)
    at Array.map (<anonymous>)


 @ ./src/index.css 4:14-157 15:3-20:5 16:22-165
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.23:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

postcss.config.js

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

索引.css

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

我想在 nx monorepo 中使用 tailwindcss 来实现我的样式。

我lib用一个global-styles.scss文件创建了一个全局样式，以保留应添加到每个app.

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

.test {
   color: aqua;
}

#root {
  --teal: #008285;
  --iceberg: #D1F0F1;
  --polar: #F6FCFD;
  --scooter: #2BBEC3;
  --purple: #481059;
  --white: #FFFFFF;
  --red: #E8203A;
  --black: #2C2C2C;
}

在我的文件中workspace.json，我已将此样式文件的路径添加到构建目标中。

"styles": ["apps/my-app/src/styles.scss", "libs/ui-shared/src/lib/styles/global-styles.scss"],

现在，test我的应用程序选择了作为 css 变量的类，但所有 tailwind 类都不起作用，因此该@tailwind指令不起作用。

和位于该文件夹中，当我将文件从该目录移动到该应用tailwind.config.js程序文件夹时，一切正常。所以我想知道是否有某种配置或规则必须将 css 文件保留在与文件相同（或更深层嵌套）的位置？postcss.config.jsapps/my-appglobal-styles.scsslibspostcss.config

我想知道是否可以让顺风导入在该全局样式文件中工作？感谢您的建议或解释！

我使用 postcss 制作了一个 Jekyll 网站。它在本地服务器上运行得很好，但是当我尝试使用 GitHub 页面部署它时，出现错误：

Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/css/style.css': PostCssNotFoundError

本地 PostCSS 服务器监听端口 8124...

我已经建立了一个带有 Snowpack 的 svelte 项目，其中我尝试使用顺风进行样式设置，但是使用悬停或焦点等状态会导致 VS Code 抛出错误

Semicolon or block is expected

If you expect this syntax to work, here are some suggestions:
If you use less/SCSS with `svelte-preprocess`, did you add `lang=\"scss\"`/`lang=\"less\"` to your `style` tag? If you use SCSS, it may be necessary to add the path to your NODE runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`.
Did you setup a `svelte.config.js`? 
See https://github.com/sveltejs/language-tools/tree/master/docs#using-with-preprocessors for more info.

导致问题的一个代码示例是

<style lang="postcss">
  button {
    @apply …

我按照Tailwind 文档中的步骤将 Tailwind CSS v3 添加到我的 Nuxt.js v2.15.8 项目中。现在，当我在运行时保存文件时npm run dev，我陷入了重建循环。它继续成功构建，但随后声称刚刚更新了一些随机数，因此它会重建。我必须使用 Control + C 才能让它退出。

\xe2\x86\xbb Updated components/Comment.vue                                                                                                                21:08:59\n\n\xe2\x9c\x94 Client\n  Compiled successfully in 1.86s\n\n\xe2\x9c\x94 Server\n  Compiled successfully in 1.49s\n\n\xe2\x86\xbb Updated 1642194543006  \n\n\xe2\x9c\x94 Client\n  Compiled successfully in 1.14s\n\n\xe2\x9c\x94 Server\n  Compiled successfully in 1.62s \n\n\xe2\x86\xbb Updated 1642194545447\n\n\xe2\x9c\x94 Client\n  Compiled successfully in 1.13s\n\n\xe2\x9c\x94 Server\n  Compiled successfully in 947.08ms\n\n\xe2\x86\xbb Updated 1642194547991\n\n...\n

有谁知道可能是什么原因造成的？我添加到“nuxt.config.js”中的唯一两件事如下，直接来自 Tailwind CSS 文档。

// nuxt.config.js\n\nbuildModules: [\n  // ...\n  \'@nuxt/postcss8\',\n],\n// ...\nbuild: {\n  // ...\n  postcss: {\n …

(4:3) 已检测到嵌套 CSS，但 CSS 嵌套尚未正确配置。请在配置中的 Tailwind之前启用 CSS 嵌套插件。请参阅此处： https: //tailwindcss.com/docs/using-with-preprocessors#nesting

我的 postcss.config.js 文件：

  plugins: [
    "postcss-import",
    "tailwindcss/nesting",
    "tailwindcss",
    "autoprefixer",
  ],
};

我试着这样写下来：

  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

像这样：

  plugins: [
    require("postcss-import"),
    require("tailwindcss/nesting"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

包含此项目的 Github 存储库：https ://github.com/frkam/test-app

当我尝试使用嵌套时，我得到以下信息：在此处输入图像描述

我有下一个 postcss 配置

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        browsers: 'last 2 versions, IE 11, not dead',
        preserve: false,
        features: {
          'custom-media-queries': true,
          'custom-properties': true,
          'nesting-rules': true
        },
        importFrom: ['src/styles/variables.css']
      }
    ]
  ]
}

这个文件带有 css 变量

@custom-media --desktop screen and (min-width: 768px);
@custom-media --mobile screen and (max-width: 767px);

:root {
  --montserrat: montserrat, sans-serif;
  --sfProDisplay: sf pro display, sans-serif;
  --helvetica: helvetica, sans-serif;
  --blue: #315efb;
  --middleBlue: #2c54e2;
  --darkBlue: #274bc8;
  --lightBlue: #e0ebff;
  --green: #21a038;
  --grey: #62687f;
  --darkGray: #343b4c;
  --blueGray: #8d96b2; …

我正在尝试将tailwindcss v3添加到现有的故事书设置中。

我已经尝试并遵循了所有具有类似功能的指南。请帮忙。

在尝试设置 tailwindcss 之前它正在做什么

• Storybook 运行并编译组件和故事。
• PostCSS 8+ 带有一些插件。

我做了什么

• 已安装tailwindcss

• 添加tailwindcss:{}到postcss.config.js

• 我将新添加的导入styles/globals.css到storybook/preview.js

像这样：import './styles/globals.css';并添加了指令

/******** storybook/styles/globals.css ********/

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

• 我在中设置了以下配置main.js

/******** storybook/main.js ********/

module.exports = {
  stories: ['./stories/*.stories.mdx', './stories/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/preset-scss',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  staticDirs: ['./public'],
  core: {
    builder: 'webpack5',
  },
};

我运行时遇到的错误yarn storybook。

/******** …

无法通过 Storybook UI 实时应用 Tailwind 类，例如，通过classes这里的 props 更改按钮的颜色从bg-red-600到bg-red-100不会改变 Storybook ui 中按钮的颜色，是否可以更改用户界面中的按钮看看它会是什么样子？（组件在应用程序中按预期工作，只是不在故事书中工作）

不确定这是否与清除或 JIT 编译有关https://github.com/tailwindlabs/tailwindcss/discussions/6347

storybook ui

button component

<button
      type="button"
      className={clsx(
        "rounded-full py-2 px-3",
        classes,
        disabled ? "disabled:opacity-25" : ""
      )}
      onClick={onClick}
    >

tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

button.stories.tsx

ButtonComponent.args = {
  label: "Button",
  classes: "bg-red-600",
  disabled: false,
};

preview.js

import "!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css";
import "../styles/globals.css";

export const parameters = {
  actions: { …

我正在使用Scss和Bootstrap来设计我的项目。为了删除未使用Css的purgeCss，我自定义了我的postcss.config.js文件，如下所示：

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}",
        ],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],
  ],
};

问题是postCss忽略我的Scss文件并且不显示样式。如何添加Scss到postcss.config.js文件？