Проблема с псевдонимом в Webpack - PullRequest
Новая
       6

Проблема с псевдонимом в Webpack

1 голос
/ 17 февраля 2020

У меня небольшая проблема с настройкой одного веб-пакета, и я надеюсь, что кто-то столкнулся с той же проблемой и пришел с решением.

Проблема

Я пытаюсь использовать псевдоним внутри Файлы HTML / SCSS / JS.

В настоящее время он работает только полностью в файлах S CSS, частично в файлах HTML и совсем не в файлах JS.

Так, например, это работает: 

<img src="~images/slogan.png" alt="" width="324" height="211">

, но в теге style он не: 

<div class="hero__image" style="background-image: url(~images/slogan.jpg)"></div>

Он не выдает никаких ошибок, он просто выводит, как есть - с строка псевдонима.

Код

webpack.config. js

resolve: {
    alias: {
            'assets': utils.srcPath(),
            'vendor': utils.srcPath('vendor'),
            'images': utils.srcPath('images'),
            'fonts': utils.srcPath('fonts'),
            'scss': utils.srcPath('scss'),
    }
  },

правило стиля: 

{
    test: /\.(scss|css)$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../../',
                sourceMap: true,
                hmr: isDev,
                reloadAll: true
            },
        },
        {
            loader: 'css-loader',
            options: {
                sourceMap: true
            }
        },
        'resolve-url-loader',
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true,
                plugins: [
                    require('autoprefixer')({})
                ]
            }
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true,
                sassOptions: {
                    importer: globImporter()
                }
            }
        }
    ]
}

html rule: 

{
    test: /\.html$/,
  loader: 'html-loader',
  include: utils.srcPartialsPath(),
  options: {
    interpolate: true
  }
}

Какую информацию я выкапывал

Единственная информация, которую мне удалось выкопать, была для порядка 'resolve-url-loader' и для его изменения, но без любой успех. Добавление его до того, как css-loader нарушит настройку, добавление до того, как sass-loader ничего не сделает.

Кроме этого ничего другого, что может указать мне на рассматриваемый вопрос.

Резюме

Псевдоним работает для атрибутов img src, но не для встроенных CSS.

Любое понимание будет высоко ценится!

...