html - 如何使用 jstransformer-scss 和 pug-cli 将 SCSS 嵌入到 Pugjs 模板中？

Question

使用 WebStorm 的“文件观察器”功能和 pug-cli，我正在创建一个 pug 模板，当 pug 模板被修改时，它会自动内置到 HTML 文件中。由于外部原因，我需要将 CSS 嵌入我的 HTML 文件中，以便我可以在第三方电子商务平台中使用它。这是我目前在 PUG 模板中嵌入 CSS 的尝试，但由于 pug 不支持“require”，该模板不起作用:

---

模板.pug

- var jstscss = require('jstransformer')(require('jstransformer-scss'))
- var scss = `

    @import "../a-file-I-need-imported"
    $bgcolor = #fff;
    body {
        background-color: $bgcolor;
    }

`

script.
    !{jstscss.render(scss)}

理想情况下，这将内置于:

---

模板.html

<script>

    body {
        background-color: #fff; }

    // a-file-I-need-imported's CSS, that was imported. (i.e. Mixins, other variables, etc.)

</script>

---

包.json

"build:pug": "pug --pretty --basedir ./ --out ./dist/ ./src"

---

如何在仍然使用 pug-cli 的同时完成这项壮举？ (这是 WebStorm 的文件观察器与我的 package.json 构建脚本一起使用的。)

编辑:我假设它与在 pug-cli 中重新编码渲染函数和注入(inject) jstransformer 有关，但我不熟悉 Node 、javascript、pug，所以我不确定我会怎么做没有直接编辑 node_module，如果我更新它，它会被覆盖。 Node 模块是否有类似 Wordpress 子主题的东西？哈哈。

Answer 1

只需调用一个新脚本，例如 node build.js 并使用 pug 模块，因为 pug-cli 不支持将 JSON 对象或文件之外的任何内容传递给 本地人

构建.js

const pug = require('pug')
const jstscss = require('jstransformer')(require('jstransformer-scss'))
let locals = {jstscss};
const html = pug.renderFile('./template.pug',locals);
console.log(html); // instead, output your file using this function.

模板.pug

- var scss = `@import "./import"; $bgcolor : #fff; body {background-color: $bgcolor;}`

style.
    !{jstscss.render(scss).body}

导入.scss

body{
  font-size:12px;
}

这种情况下的输出

<style>body {
  font-size: 12px; }

body {
  background-color: #fff; }
</style>

https://repl.it/@CodyGeisler/PugRendersScss