I will first include a picture, as it explains the situation the best:
My question is as follows:
The paths circled in red are really odd. Here is an example:
C:/Users/..../Documents/Programming/_actual-programs/html-css-js/github-pages/name.github.io/src/C:/Users/.../Documents/Programming/_actual-programs/html-css-js/github-pages/name.github.io/src/C:/Users/.../Documents/Programming/_actual-programs/html-css-js/github-pages/name.github.io/src/C:/Users/.../Documents/Programming/_actual-programs/html-css-js/github-pages/name.github.io/src/styles.scss
As seen, there are tons of CSS
files on the left, under (no domain)
, and each file has the path repeated multiple times. That does not seem right. I believe it has to do with the source maps for the CSS.
My Webpack
setup has sourceMap
set to true
for every loader that processes CSS (only posting the relevant part):
{
test: /\.s?[ac]ss$/,
exclude: /node_modules/,
use: [
isProduction
? MiniCssExtractPlugin.loader
: {
// creates style nodes from JS strings
loader: 'style-loader',
options: {
sourceMap: true,
// convertToAbsoluteUrls: true
}
},
{
// CSS to CommonJS (resolves CSS imports into exported CSS string in JS bundle)
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 3
// url: false,
// import: false
}
},
{
loader: 'postcss-loader',
options: {
config: {
ctx: {
cssnext: {},
cssnano: {},
autoprefixer: {}
}
},
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
options: {
attempts: 1,
sourceMap: true
}
},
{
// compiles Sass to CSS
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
If I set one of the sourceMap
properties to false
(for instance postcss-loader
), the paths are no longer duplicated like above.
But according to the various loader documentations, each loader on the chain, from start to end in the Webpack config, must be set to true
for the output to be correct.
Any thoughts on what is going on here would be deeply appreciated.
EDIT:
This question has an open issue here: https://github.com/webpack-contrib/css-loader/issues/652