На одном из проектов использую 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
.