带有顺风和postcss的十六进制

Question

我正在尝试在hexo中使用顺风。从https://tailwindcss.com/docs/installation/#using-tailwind-with-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': {},
  }
}