Webpack, Scss - добавить путь к серверу cdn перед компиляцией

Question

Как добавить переменную пути cdn в styles.scss перед компиляцией? У меня есть конфигурация webpack 4, которая отлично работает для JS. Файлы JS / CSS загружаются правильно из нужного URL-адреса CDN.

Чего я хочу добиться, так это того, чтобы в проекте, работающем на localhost, для изображений / значков / шрифтов использовался другой URL-адрес cdn, чем в той же сети, работающей на производстве.

В моем конфиге webpack есть следующие строки для настройки домена cdn:

if (process.env.NODE_ENV === 'production') {
    webUrl = 'https://cdn.project.com/';
}
else if (process.env.NODE_ENV === 'development') {
    webUrl = 'http://localcdn.localhost/';
}

Этот код хорошо работает для файлов JS / CSS, но CSS всегда загружает фоны / шрифты, используя относительный путь, который, конечно, является основным доменом, а не cdn.

Может быть, просто откройте файл styles.scss и обновите файл вручную перед компиляцией веб-пакета? Разве нет лучшего способа?

Answer 1

После нескольких часов проб и ошибок я нашел это решение для веб-пакета 4. Это может помочь кому-то пытаться решить ту же проблему.

        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options : {
                        url : false,
                        sourceMap: devMode
                    }
                },
                {
                    loader: 'sass-loader',
                    options : {
                        processCssUrls : false,
                        sourceMap: devMode,

                        data : "$cdnFolder: 'http://cdn.myweb.net/';"
                    }
                }
            ],
        },

Это часть файла webpack.config.js, вsection:

module : {
  rules : {

Эта конфигурация делает переменную scss $ cdnFolder доступной в каждом файле scss.Ссылка CDN может быть изменена в зависимости от текущего режима dev / prod / stage.