Я занимаюсь обновлением веб-сайта с Webpack1 до Weback3, и у меня возникли проблемы с переводом загрузчика scss в формат Webpack 3 из-за следующей строки:
css?-autoprefixer&sourceMap!postcss?parser=postcss-scss!sass?sourceMap'
Я понял, что для перевода этой строки в Webpack3 мне нужно добавить суффикс "-loader" к одному из элементов, например, "css" становится "css-loader".
Я даже могу заставить сайт скомпилироваться, если уберу последнюю половину строки и включу только "css-loader", но стиль домашней страницы нарушен. По какой-то причине, если я включу весь раздел исходной карты, он не скомпилируется с ошибкой «ОШИБКА в модуле ввода не найдена: ошибка: не удается разрешить« css ?-autoprefixer & sourceMap »»
Исходным загрузчиком в Webpack 1 был:
loaders: [
{
loader: ExtractTextPlugin.extract('style-loader', 'css?-autoprefixer&sourceMap!postcss?parser=postcss-scss!sass?sourceMap'),
test: /\.scss$/
},
В Webpack 3 я перевел его на:
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [require.resolve('css-loader?-autoprefixer&sourceMap!postcss-loader?parser=postcss-scss!sass-loader?sourceMap'), require.resolve('sass-loader')]
})
},
Если кто-нибудь может подсказать, как обойти эту ошибку, когда модуль не найден, я был бы очень признателен. Я часами просматривал документацию и гуглил, и я не могу найти четкого руководства относительно того, что означают все символы соединителя в строке (! = ? &
) или почему он теперь возвращает модуль, не найденный.