0

例如：考虑一个路由/主题该路由应该在指定为路由/查询参数的主题（阅读：LESS 颜色变量）中呈现自己。根据主题参数，可能还需要注入自定义的 JS 脚本。

脚本和样式可能包含也可能不包含，具体取决于提供的参数（这排除了预配置套索或使用 bower.json）。这也意味着必须在路由渲染模板之前指定依赖项。

我目前正在使用 Marko v4 + ExpressJS + Lasso + Less + lasso-marko + lasso-less

我没有发布代码，因为在尝试了很多东西之后它有点到处都是。如果描述不够清楚，请告诉我。将尝试组合一个沙箱用于演示目的。

更新：添加核心文件和目录结构

sandbox
|- components
|  |- app-main.marko
|- dependencies
|  |- theme1
|     |- main.js
|     |- variables.less
|  |- theme2
|     |- main.js
|     |- variables.less
|- node_modules
|- public
|- templates
|  |- base
|     |- index.marko
|     |- style.less
|     |- browser.json  
|- index.js
|- package.json



//index.js
var markoExpress = require('marko/express');
require('marko/node-require');

var express = require('express');

var app = express();

var compression = require('compression'); 
var isProduction = process.env.NODE_ENV === 'production';

var lasso = require('lasso');
lasso.configure({
    plugins: [
        'lasso-marko', 
        'lasso-less'
    ],
    outputDir: __dirname + '/public', 
    bundlingEnabled: isProduction, 
    minify: isProduction, 
    fingerprintsEnabled: isProduction,
});

app.use(express.static('public'));
app.use(markoExpress());


app.use(compression());


app.use(require('lasso/middleware').serveStatic());

var template = require('./templates/base');
app.get('/:pub', function (req, res) {
    var pub = req.params.pub || "theme1";

    res.marko(template, {
        theme:pub
    });
});

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
    if (process.send) {
        process.send('online');
    }
});


//browser.json
{
    "dependencies": [
        {
            "if-flag": "theme1",
            "dependencies": [
                "less-import: ../../dependencies/theme1/variables.less",
                "../../dependencies/theme1/main.js"            
            ]
        },
        {
            "if-flag": "theme2",
            "dependencies": [
                "less-import: ../../dependencies/theme2/variables.less",
                "../../dependencies/theme2/main.js"  
            ]
        }
    ]
}


<!-- index.marko -->
<lasso-page package-path="./browser.json" flags="['${input.theme}']"/>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Test Template</title>

  <!-- CSS includes -->
  <lasso-head/>

</head>
<body>

 <!-- Top-level UI component: -->
<include('../../components/app-main',input) />

<lasso-body/>
</body>
</html>


//style.less
main {
    background-color: @bgcolor;
    color: @fgcolor;
    width: 100%;
    height: 100%;
}





// ~/dependencies/theme1/variables.less
@bgcolor: red;
@fgcolor: white;

// ~/dependencies/theme1/main.js
alert("theme1");



<!-- app-main.marko -->
<main>TADAAA</main>
4

2 回答 2

0

Lasso 支持基于“标志”的条件依赖：https ://github.com/lasso-js/lasso#conditional-dependencies

如果您将主题作为标志之一，则可以使用该标志有条件地在您的 : 中引入 Less 变量或其他依赖项browser.json：

{
    "dependencies": [
        {
            "if-flag": "theme1",
            "dependencies": [
                "less-import: ./theme1/variables.less"            
            ]
        },
        {
            "if-flag": "theme2",
            "dependencies": [
                "less-import: ./theme2/variables.less"            
            ]
        }
    ]
}

您可以预先构建所有主题，也可以在运行时使用 Lasso 来动态构建页面 JS/CSS。

希望能解决您的问题。

于 2017-03-29T17:12:17.403 回答
0

在尝试了很多事情之后，我不得不求助于以编程方式将样式表构建为字符串并将其插入到样式标签内的模板中。

<style>${input.computedStyleString}</style>

这显然不太理想（考虑到套索如何很好地处理其他所有事情），但它确实有效。

于 2017-06-01T11:06:40.077 回答