找维护者!

不幸的是,我没有时间 做这个插件。 请联系我 如果你想接手这个项目的话.

安装-插管-后置2

此插件是一个优化的, 类型友好的版本 安装-插图-站点它支持CSS预处理器和CSS模块.

安装

yarn add -D esbuild-plugin-postcss2

或者说

npm i -D esbuild-plugin-postcss2

使用量

将插件添加到您的新建插件中 :

const esbuild = require("esbuild");
const postCssPlugin = require("esbuild-plugin-postcss2");

esbuild.build({
  ...
  plugins: [
    postCssPlugin.default()
  ]
  ...
});

PostCSS 插件

将您想要的 PostCSS 插件添加到插件阵列 :

const autoprefixer = require("autoprefixer");

esbuild.build({
  ...
  plugins: [
    postCssPlugin.default({
      plugins: [autoprefixer]
    })
  ]
  ...
});

CSS 模块

PostCSS模块默认启用. 您可以在配置中通过, 也可以用 modules 字段 :

postCssPlugin.default({
  // pass in `postcss-modules` custom options
  // set to false to disable
  modules: {
    getJSON(cssFileName, json, outputFileName) {
      const path = require("path");
      const cssName = path.basename(cssFileName, ".css");
      const jsonFileName = path.resolve("./build/" + cssName + ".json");

      fs.writeFileSync(jsonFileName, JSON.stringify(json));
    }
  }
});

根据标准,任何文件 module 扩展前( ie) somefile.module.css)将作为模块处理. 选项 fileIsModule 允许推翻此行为.

postCssPlugin.default({
  // pass a custom `fileIsModule` option to tell whether a file should be treated as a module
  // in this example we want everything to be a module except file finishing with `global.css`
  fileIsModule: (filepath) => !filepath.endsWith(".global.css")
});

预处理器

用于使用预处理器( E)sass, (中文(简体) ), scss, (中文(简体) ), stylus, (中文(简体) ), less),只要添加想要的预处理器作为 devDependency数字 :

yarn add -D sass