Как создать переменные, которые будут видимы в SASS, JavaScript и Jade(Pug)

#javascript #sass #jade #pug

Каким наиболее простым образом можно создать переменные, которые будут видимы в:


SASS
JavaScript-файлах (с использованием Webpack и возможностей ES6)
Jade-шаблонах


Зачем это надо, думаю понятно: меняем имя, например, CSS-класса в одном месте, и
оно автоматически подставляется везде. Без этой возможности изменить имя класса в крупном
проекте - целая проблема.
    

Ответы

Ответ 1

создаете файл .env и в нем переменную SOME_ENV_VAR к примеру
SASS_ENV=blabla

читаем переменную в компиляторе SASS или JS: var ENV = process.env.SOME_ENV_VAR ||
'default';

асайним переменную для Jade: 

const express = require('express');
var app = express();
app.locals.env = process.env;

и читаем переменную в Jade #{env.SOME_ENV_VAR}

Дополнение #1

var sass = encodeURIComponent(jsonToSassVars(sassGlobals));
var webpackConfig = {
    module: {
        loaders:[
            {test: /.scss$/, loader: "style!css!sass!prepend?data=" + sass}
        ]
    },
}


jsonToSassVars - https://gist.github.com/Kasu/ea4f4861a81e626ea308

Update: the previous link is not available anymore, prefer to use https://gist.github.com/ali-master/cb54a3501c0ea29a88a0297cb9533be9