带有顺风和 postcss 的 hexo

Question

我正在尝试将 tailwind 与 hexo 一起使用。从 https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss 看来，我需要连接 postcss，所以我以 https://github.com/chuangker/hexo-renderer-postcss 为基础。

我尝试将渲染器更改为读取

"use strict";

var postcss = require("postcss");
var postcssrc = require("postcss-load-config");
var atImport = require("postcss-import");

console.log("postcss2 registering");

module.exports = function(data) {
    console.log("postcssrc", data);
    return postcssrc()
        .then(({ plugins, options }) => {
            console.log("tailwind", plugins, options);
            return postcss(plugins)
                .use(atImport())
                .process(data.text, options);
        })
        .then(result => {
            console.log("tailwind 2", result);
            return result.css;
        });
};

这正在将我的 css 文件中的 @import "tailwindcss/base"; 正确转换为 @tailwind base，但我似乎无法通过以下方式应用顺风：

module.exports = {
    from: undefined,
    plugins: {
        tailwindcss: require("tailwindcss")
    }
};

或

module.exports = {
    from: undefined,
    plugins: [require("tailwindcss")]
};

这就是我需要帮助的地方

Answer 1

可以查看我为这个hexo-renderer-tailwindcss制作的插件

我得到它与以下工作：

renderer.js

'use strict'

var postcss = require('postcss')
var postcssrc = require('postcss-load-config')

module.exports = function (data) {
  return postcssrc().then(({
      plugins,
      options
    }) => postcss(plugins).process(data.text, options))
    .then((result) => result.css)
}

hexo-render-postcss.js

'use strict'

var renderer = require('../libs/postcss/renderer')

hexo.extend.renderer.register('css', 'css', renderer)

hexo 根.postcssrc.js

module.exports = {
  from: undefined,
  plugins: {
    'postcss-import': {},
    'tailwindcss': {},
    'autoprefixer': {},
  }
}