I'm in the process of upgrading a website from Webpack1 to Weback3, and I'm having trouble translating the scss loader into the Webpack 3 format because of the following line:
css?-autoprefixer&sourceMap!postcss?parser=postcss-scss!sass?sourceMap'
I've figured out that to translate this line to Webpack3, I need to add the "-loader" suffix to sone of the items, for exmaple "css" becomes "css-loader."
I can even get the site to compile if I take out the last-half of the line, and include only "css-loader," but the homepage styling is broken. For some reason, if I include the whole source map section, it fails to compile with error "ERROR in Entry module not found: Error: Can't resolve 'css?-autoprefixer&sourceMap'"
The original loader in Webpack 1 was:
loaders: [
{
loader: ExtractTextPlugin.extract('style-loader', 'css?-autoprefixer&sourceMap!postcss?parser=postcss-scss!sass?sourceMap'),
test: /\.scss$/
},
In Webpack 3, I have translated it to:
{
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')]
})
},
If anyone can give me some pointers on how to get around this module not found error, I would be very grateful. I've spent hours reviewing the documentation, and googling, and I can't seem to find a clear guide as to what all of the connector symbols in the line mean (! = ? &
) or why it now returns module not found.