标签: postcss

我postcss-import用来处理我的进口，并cssnano缩小。在我的 Webpack 配置中，我一直在使用以下设置css-loader...

{
  loader: 'css-loader',
  options: {
    url: false,
    import: false,
    minimize: false,
    importLoaders: 1,
    souceMap: true,
  }
}

...但是当我删除所有内容时似乎仍然可以正常加载，所以现在我post-css之前只有style-loader. 我可以安全地css-loader从我的 css 构建中省略，还是它提供了一些其他必要的功能？我还没有看到一个webpack.config.js不使用的文件css-loader，所以我想在这里保持谨慎！:)

我想在我的输出 CSS 文件和从我的 React 组件渲染的 JSX 中缩小我的类名（用于非常小的源保护目的）类似于这个 Webpack 插件：https : //github.com/vreshch/optimize-css -classnames-plugin

我可以使用任何现有的选项来实现这一点，无论是 Webpack 还是其他方式？非常感谢。

从：

<div className="long-class-name"></div>

.long-class-name {
 }

到：

<div class="a"></div>
.a {
}

我们如何将 PostCSS 支持添加到 Vue cli 3（我使用的是 beta 7）？有插件吗？它不支持开箱即用。

当我尝试像这样导入时

import './index.pcss'

使用默认 cli 生成的项目

./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
|   font-family: "sofachrome", serif;
| }
 @ ./src/main.js 5:0-22

我的 postcsssrc.js：

module.exports =
  {
    'plugins': {
      'autoprefixer': {},
      'postcss-smart-import': {},
      'postcss-custom-properties': {},
      'postcss-nested': {}
    }
  }

这是我Webpack的scss/css文件配置。

...
{
    test: /\.s?css$/,
    use: [
      'style-loader',
      { loader: 'css-loader', options: { importLoaders: 2 } },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: loader => [
            require('postcss-import')({ root: loader.resourcePath }),
            require('cssnano')(),
            require('postcss-cssnext')(),
          ]
        }
      },
      'sass-loader',
    ]
}
...

问题是，当我使用cssnext类似gray(100)的函数时，输出CSS文件在该函数所在的位置有一个空值。我想知道我在这里做错了什么。

即 background-color: gray(100);输出到background-color: ;

我是 postcss 的新手，所以我真的不知道它是如何工作的，也不知道如何正确配置它。

Autoprefixer 不适用于包裹 1.9.7：我有我的 src 文件夹，我有 .postcssrc 文件和样式文件在 .postcssrc 文件内的同一文件夹内容中： { "plugins": { "autoprefixer": true } }

包裹与npm install -g parcel-bundler pacckage json dev depenndacies一起安装：

"devDependencies": {
 "autoprefixer": "^9.1.3",
 "node-sass": "^4.9.3",
 "postcss-modules": "^1.3.2"
},

也许有人知道可能是什么问题？

我正在尝试将 webpack 与 postcss 一起使用来导入包含我的 css 自定义变量的 theme-variables.css 文件。

//theme-variables.css
:root {
    --babyBlue: blue;
}

基本上我希望任何导入主题变量的 css 能够访问这些 css 自定义属性并使用 postcss-css-variables 解析为静态值。

//style.css
@import "./theme-variable.css";

div {
    display: flex;
    color: var(--babyBlue);
}

变成

//main.css
div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: blue;
}

但是我不断收到 webpack 错误 variable --babyBlue is undefined and used without a fallback

main.js 最终看起来像这样：

:root {
    --babyBlue: blue;
}
div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: undefined;
}

这是我的 webpack（index.js 需要styles.js）：

const path …

我有一个使用 Parcel.js 打包器构建的已部署项目。

应用 CSS Autoprefixer 并重新部署网站后，我网站的几乎所有样式都已损坏。我真的不确定是什么导致了这种情况，不幸的是，对于我遇到的问题，我什至找不到一个类似的问题。

我首先在我的开发依赖项中添加了 Autoprefixer：

"devDependencies": {
    "autoprefixer": "^9.5.1",
    "parcel-bundler": "^1.12.3",
    "postcss-modules": "^1.4.1"
  },

然后我在我的根文件夹中创建了一个 .postcssrc 配置文件，其中包含：（我在站点中使用了相当多的 CSS-Grid 布局，因此有以下配置）

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": "autoplace"
    }
  }
}

我还在根文件夹中为浏览器目标创建了一个 .browserslistrc 配置文件，其中包含：

defaults

我为浏览器目标选择了默认配置，因为它在 Autoprefixer 文档中提到，默认选项包含各种浏览器，而且因为我没有任何特定需求，这似乎是最好的选择。

我已尽力准确描述事件，如果您需要更多信息，请告诉我。

更新：我认为问题是"autoprefixer": { "grid": "autoplace"在 autoprefixer 文档中提到的，选择这个选项可能会导致已经部署/建立的没有 autoprefixer 的网站出现问题。所以我将我的更改回滚到它的 pre-autoprefixer 状态并没有再次完成所有步骤，但是这次我没有启用该grid: autoplace选项并选择了默认值，grid: true但我再次遇到了同样的问题。

我认为这可能与 Parcel 或我在 Parcel 中使用 postcss 的方式有关。

我正在使用scss-bundle导入scss文件并解析他的所有@import语句，以便稍后将其再次保存为scss文件。

这工作正常，下面是一个例子，看看它是如何工作的：

scss-bundle.ts

import { Bundler } from 'scss-bundle';
import { relative } from 'path';
import { writeFile } from 'fs-extra';

/** Bundles all SCSS files into a single file */
async function bundleScss(input, output) {
  const {found, bundledContent, imports} = await new Bundler()
    .Bundle(input, ['./src/styles/**/*.scss']);
  if (imports) {
    const cwd = process.cwd();

    const filesNotFound = imports
      .filter((x) => !x.found)
      .map((x) => relative(cwd, x.filePath));

    if (filesNotFound.length) {
      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - …

我在 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 文件中