Фронтенд

Как прокинуть переменную из webpack.mix.js в SASS/SCSS-файл

На одном из проектов использую Laravel Mix для сборки стилей и скриптов. Потребовалось прокидывать в SCSS-файл переменную из webpack.mix.js, чтобы в итоговый CSS-файл подставлялся либо дев, либо прод домен.

Путём гугления, чтения документации и экспериментов нашёл решение. Во-первых, проставляем нужную ENV-переменную в файле package.json:

"development": "cross-env NODE_ENV=development ENV_DOMAIN=http://my-dev-domain.loc node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

То есть я просто добавил ENV_DOMAIN=http://my-dev-domain.loc в эту строку. Не забываем и для production указать свой домен.

Во-вторых, подтягиваем эту переменную окружения в webpack.mix.js и прокидываем её в SASS/SCSS-файл:

mix.setPublicPath('public_html/')
        .sass('input.scss', 'assets/css/output.css', {
            data: "$domain: '" + process.env.ENV_DOMAIN + "';"
        })

Всё. Теперь у вас в input.scss доступна переменная $domain, которую можно использовать вот так:

@font-face {
  font-family: 'app-name-icons';
  src:  local('app-name-icons'),
  url('#{$domain}/full-paths-to-assets/fonts/app-name-icons.eot?1#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Для «голого» вебпака всё делается примерно также, только переменная прокидывается через опции sass-loader.