PostCSS 和汇总

Question

我不知道为什么在尝试使用 postcss 和 rollup 时出现此错误 — 所有插件都是最新的。

[dev:rollup] [!] (plugin postcss) Error: PostCSS plugin postcss-import requires PostCSS 8.
[dev:rollup] Migration guide for end-users:
[dev:rollup] https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
[dev:rollup] src/_bundle/main.css
[dev:rollup] Error: PostCSS plugin postcss-import requires PostCSS 8.
[dev:rollup] Migration guide for end-users:
[dev:rollup] https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
[dev:rollup]     at Processor.normalize (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/processor.es6:117:15)
[dev:rollup]     at new Processor (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/processor.es6:38:25)
[dev:rollup]     at postcss (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/node_modules/postcss/lib/postcss.es6:34:10)
[dev:rollup]     at /Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:213:28
[dev:rollup]     at Generator.next (<anonymous>)
[dev:rollup]     at asyncGeneratorStep (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:19:24)
[dev:rollup]     at _next (/Users/.../Workspace/gfe-builder/app/node_modules/rollup-plugin-postcss/dist/index.js:41:9)

在package.json中：

"dependencies": {
 ...
 "postcss-import": "^13.0.0",
 "postcss-nested": "^5.0.1",
 "rollup": "^2.33.3",
 "rollup-plugin-postcss": "^3.1.8",
  ...
},
"devDependencies": {
  "postcss": "^8.1.10",
},
"peerDependencies": {
  "postcss": "^8.1.10"
}

rollup.config.js

export default {
  input: "src/_bundle/main.js",
  output: {
    sourcemap: dev,
    format: "iife",
    name: "main",
    file: "dist/assets/main.bundle.js",
  },
  plugins: [
    ...
    postcss({
      plugins: [
        postcssImport(),
        postcssNested(),
      ],
      extract: "dist/assets/main.bundle.css",
      minimize: !dev,
    }),
  ],
};

Answer 1

你必须安装 postcss npm 包：

npm install --save-dev postcss

PostCSS 和汇总

PostCSS and Rollup

rollup

postcss