标签: postcss

我在 Svelte 中遇到了这个奇怪的错误；每次我运行时npm run dev，都会出现这个vite错误：

[vite] Internal server error: Failed to load PostCSS config (searchPath: /Users/Documents/Personal projects): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: /Users/Documents/Personal projects): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: /Users/Documents/Personal projects): [Error] Cannot find module 'autoprefixer'

我是 vite 新手，所以我花了一个小时的研究，找出如何导出模块，我能够通过创建一个postcss.config.cjs文件并在文件中添加来修复它：

module.exports = {
    autoprefixer: {}
}

我希望这可以帮助遇到相同/类似错误的任何人。

我正在尝试将 TailwindCSS 与 SCSS 结合使用，但打开此文件时 VSCode 总是给我一条错误消息，我该如何修复它？

此错误的图像

我在 postcss 文件中的配置：

module.exports = {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
    },
};

我在 VSCode settings.json 中的配置：

{
    ...
    "css.lint.unknownAtRules": "ignore",
    "css.lint.emptyRules": "ignore",
    "scss.lint.unknownAtRules": "ignore",
    "scss.lint.emptyRules": "ignore"
}

我发现错误原因#{!important}在 .scss 文件中

我有一个使用 Storybook 和 TailwindCSS 的组件库，以及一个也使用 TaildwindCSS 本身导入组件库的主机应用程序。生成类后，我发现它们是重复的：

这两个项目都在其文件中标准导入 TailwindCSS，index.css然后使用以下命令index.tsx导入 import "./index.css";：

导入时，主机应用程序确实会从组件库中生成所有类，但由于存在重复的类，一些类由于顺序而被覆盖（请注意上图中的源代码和行号）

该组件在故事书中看起来是正确的：

主机应用程序：

正在寻找有关如何在主机应用程序中正确导入组件库的建议？

更新：

我认为组件库会按预期生成它自己的 TailwindCSS 类，这就是“重复”类 ( inline) 的来源，并且它包含在文件夹index.js中的单个输出中dist。在主机应用程序中导入时，仍然需要一种方法来避免这些重复。可能需要考虑更改组件库以构建.css具有样式的单独文件，并告诉主机应用程序生成组件库的样式以防止这些重复。

我目前正在使用 Tauri、SvelteKit 和 Tailwind 开发桌面应用程序。当我运行应用程序的开发版本时，我经常收到以下错误：

    [vite] Internal server error: [postcss] /home//src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11: Unknown word
  Plugin: vite:css
  File: /home/myProj/src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11
  1  |  <script lang="ts">
  2  |          import { appWindow, LogicalSize } from '@tauri-apps/api/window';
     |             ^
  3  |          appWindow.setSize(new LogicalSize(700, 404));
  4  |          import { rand } from '$lib/math';
      at Input.error (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/input.js:148:16)
      at Parser.unknownWord (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:540:22)
      at Parser.other (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:164:12)
      at Parser.parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parser.js:72:16)
      at parse (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:133:16)
      at Processor.process (/home/myProj/node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/processor.js:28:14)
      at compileCSS (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:38356:14)
      at async TransformContext.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:37810:56)
      at async Object.transform (file:///home/myProj/node_modules/.pnpm/vite@4.2.1/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)

如果我重新加载浏览器窗口或保存文件并热重载，则错误就会消失。此外，当我启动应用程序时，该错误并不总是发生。我想说大约 70% …

我想使用 postcss-loader 和 css 模块将一组样式传递给 React 组件。我用于编译 css 文件的 webpack.config.file 如下所示：

loaders: [
    'style-loader', 
    'css-loader?modules&importLoaders=1&localIdentName[name]__[local]___[hash:base64:5]',
    'postcss-loader'
],

我的 React 组件文件如下所示：

import styles from './cssFile.css';
class Component extends React.Component{
    render(){
       return(
           <div className={[styles.spinner, styles.spinner_2]}></div>
       )
    }   
}

每当我只将一种样式传递给 className 时，它​​都会正确加载它，但是当我传递一个数组时，它不会解析任何样式。相反，它在编译类名称上用逗号连接它。

如何将多个样式传递给元素？

现在我正在将我当前的项目移动Webpack 1到,Webpack 2并且我遇到了一些以前工作正常的css模块的问题.特别是,我使用css-loader和react-css-modules.我目前的开发配置如下:

test: /module\.css$/,
use: [
        'style-loader',
        {
           loader: 'css-loader',
           options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
           }
        },
        'postcss-loader'
   ]

它工作正常.对于生产我使用ExtractTextPlugin(版本2.0.0-beta.4)和我的Webpack配置为这种情况是这样的:

test: /module\.css$/,
loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
                    {
                       loader: 'css-loader',
                       options: {
                           modules: true,
                           importLoaders: 1,
                           localIdentName: '[hash:base64:5]'
                       }
                     },
                     'postcss-loader'
                    ]
                }),

在这种情况下,构建失败并出现以下错误:

 Module build failed: Error: composition is only allowed
 when selector is single :local class name

所以看起来它没有预先添加本地前缀.它也在css-loader文档中提到:

注意:对于使用extract-text-webpack-plugin进行预渲染,您应该在预渲染包中使用css-loader/locals而不是style-loader!css-loader.它不嵌入CSS,只导出标识符映射.

所以我尝试了加载器:'css-loader/locals'以及将它添加到选项中,但不幸的是,没有任何作用.

我也试图用postcss …

现在，我正在从事一个项目，其中我必须支持 ie10 的 Flexbox，我正在尝试通过终端独立地自动添加一些 CSS 代码。

该项目不支持任何构建工具，如 gulp 或 webpack。

所以我安装了 postcss 和 autoprefixer 如下：

npm install -g postcss autoprefixer

然后我尝试像这样自动添加单个文件前缀：

npx postcss --use autoprefixer --autoprefixer.flexbox --autoprefix.browser "> 0%" -o main.css test.css

它适用于我的大部分代码，但它不包含 ie10 中 Flexbox 的任何前缀。

难道我做错了什么？

由于从 less 迁移到 css，visual studio code 给我带来了困难。

编辑 *.less 文件时，自动完成功能非常好并显示如下信息：

但是，当我在 *.css 文件中做同样的事情时，事情看起来像这样：

这既不显示 MDN 参考，也不列出可用的自动建议选项。我已经多次浏览了我的扩展程序，但是没有安装任何不那么具体的东西。

为什么我在编辑 less 和 css 文件时会看到如此不同的行为？最重要的是，如何为 css 文件启用 MDN 参考和自动完成功能？

编辑

刚刚发现，这种行为的原因是使用了 post css。Visual Code 对 css 文件使用文件类型 post css。当文件类型更改为 css 时，行为与 less 文件相同。有没有办法为 post css 文件类型启用 css IntelliSense 功能？

当我使用 Tailwind 使用自定义 webpack 设置 Angular 应用程序的样式时，styles.js 块在运行后非常大ng build，大约 30mb。这不仅需要永远的构建时间，而且还会减慢我的网络应用程序的速度。

清除 Tailwind 后，styles.js 块要小得多（~100kb），但是 30mb 看起来大得离谱，甚至未清除。

这甚至适用于使用https://github.com/notiz-dev/ngx-tailwind构建的新应用程序，所以我不确定是什么导致了这个问题。

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            ident: 'postcss',
            syntax: 'postcss-scss',
            plugins: [
              require('postcss-import'),
              require('tailwindcss'),
              require('autoprefixer'),
            ],
          },
        },
      },
    ],
  },
}; …

我有一个基于入门项目的 Gatsby and Sanity 站点。到目前为止，一切都运行良好，但我今天在 package.json 文件中更新了所有包和插件，以消除所有 npm 警告。这包括更新到 Gatsby 3.0.3 和 PostCss 8（我现在也在使用 gatsby-plugin-postcss 4.0.0）。

我设法解决了一些初始错误，但现在我遇到了一个问题，它无法识别我的 CSS 模块。我收到每个组件文件的错误：

尝试导入错误：“[componentName].module.css”不包含默认导出（作为“样式”导入）

当我在反应组件中导入 css 文件时

import styles from './[componentName].module.css'

样式对象返回未定义。我是否需要降级到其中一些软件包的旧版本？

这是我的 package.json：

  "dependencies": {
    "@cloudflare/wrangler": "^1.15.0",
    "@fontsource/montserrat": "^4.2.2",
    "@fontsource/raleway": "^4.2.2",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/client": "^2.2.6",
    "@sanity/image-url": "^0.140.22",
    "date-fns": "^2.19.0",
    "dotenv": "^8.2.0",
    "gatsby": "^3.0.3",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-manifest": "^3.0.0",
    "gatsby-plugin-react-helmet": "^4.0.0",
    "gatsby-source-sanity": "^6.0.5",
    "get-youtube-id": "^1.0.1",
    "postcss-import": "^14.0.0",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.1",
    "react-autosize-textarea": "^7.1.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^6.15.4",
    "react-icons": "^4.2.0",
    "react-script": "^2.0.5",
    "react-youtube": "^7.13.1" …