Как я могу встроить SCSS в шаблон Pugjs, используя jstransformer-scss и pug-cli? - PullRequest
Новая
       15

Как я могу встроить SCSS в шаблон Pugjs, используя jstransformer-scss и pug-cli?

0 голосов
/ 20 сентября 2018

Используя функцию 'File Watchers' в WebStorm и pug-cli, я создаю шаблон pug, который автоматически встраивается в файл HTML при изменении шаблона pug.По экзогенным причинам мне нужно встроить 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)}

Thisв идеале будет встроено в:

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"

Как мне это сделатьподвиг, все еще используя мопс?(Именно это и использует File Watcher WebStorm вместе со сценарием сборки моего package.json.)

Редактировать: Я предполагаю, что это будет связано с перекодированием функции рендеринга в pug-cli и внедрением jstransformer, ноЯ не знаком с node, javascript, pug, поэтому я не уверен, как бы я поступил так без непосредственного редактирования node_module, который был бы переопределен, если я когда-либо обновлю его.Есть ли что-нибудь похожее на Wordpress Child Theme для узловых модулей?лол.

1 Ответ

0 голосов
/ 20 сентября 2018

Просто вызовите новый скрипт, например 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

...