Question

使用WebStorm的“文件监视程序”功能和pug-cli，我正在创建一个pug模板，当修改pug模板时，该模板会自动构建到HTML文件中。由于种种原因，我需要将CSS嵌入HTML文件中，以便可以在第三方电子商务平台中使用它。这是我当前尝试将CSS嵌入到PUG模板中的尝试，因为pug不支持'require'，因此无法正常工作：

template.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)}

理想情况下，将其内置：

template.html

<script>

    body {
        background-color: #fff; }

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

</script>

package.json

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

在仍然使用pug-cli的情况下如何完成这项壮举？（这是WebStorm的File Watcher以及我的package.json的构建脚本所使用的。）

编辑：我想这将与在pug-cli中重新编码render函数并注入jstransformer有关，但是我不熟悉node，javascript，pug，所以我不确定该怎么做无需直接编辑node_module，如果我更新它，它将被覆盖。是否有类似Wordpress子主题的节点模块？大声笑。

Answer 1

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

build.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.

template.pug

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

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

import.scss

body{
  font-size:12px;
}

在这种情况下的输出

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

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

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

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

1 个答案: