Hi there,
I am facing an issue when running "parcel build". Apparently the paths required to correctly reference CSS stylesheets are not set correctly within the html file.
Means, if I run
parcel build src/index.html
with the following config added to my package.json
"devDependencies": {
"parcel-bundler": "^1.12.5",
"parcel-plugin-clean-dist": "^0.0.6",
"parcel-plugin-structurize": "^2.4.4",
"sass": "^1.34.0"
},
"parcel-plugin-structurize": {
"verbose": true,
"displayAssetsMap": true,
"rules": [
{
"match": "*.{css,css.map}",
"folder": "css"
},
{
"match": "*.{js,js.map}",
"folder": "js"
},
{
"match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm,webp}",
"folder": "img"
}
]
}
I expect my index.html to be rendered with the following references to *.css and *.js
<link rel="stylesheet" href="/css/main.bb27b9fc.css">
...
<script src="/js/main.95ec2e8c.js"></script>
instead I am getting the following generated, JS looks fine but CSS is not referenced correctly (missing the css/ folder)
<link rel="stylesheet" href="/main.bb27b9fc.css">
...
<script src="/js/main.95ec2e8c.js"></script>
My output from the build command looks like this
npm run build-prod
> [email protected] build-prod
> parcel build src/index.html
โ Building...
โจ Built in 2.36s.
dist/main.95ec2e8c.js 1.24 KB 2.00s
dist/main.bb27b9fc.css.map 969 B 2ms
dist/main.95ec2e8c.js.map 875 B 0ms
dist/index.html 786 B 8ms
dist/main.bb27b9fc.css 754 B 1.71s
parcel-plugin-structurize
Config: [AbsolutePathToProject]/package.json
Assets Map:
{
'/index.html': {
source: '[AbsolutePathToProject]/dist/index.html',
destination: null,
replacer: null,
mapFile: false,
dependents: [ '/main.95ec2e8c.js' ],
config: undefined
},
'/main.95ec2e8c.js': {
source: '[AbsolutePathToProject]/dist/main.95ec2e8c.js',
destination: '[AbsolutePathToProject]/dist/js/main.95ec2e8c.js',
replacer: '/js/main.95ec2e8c.js',
mapFile: false,
dependents: [ '/main.95ec2e8c.js.map', '/main.bb27b9fc.css' ],
config: { match: '*.{js,js.map}', folder: 'js' }
},
'/main.95ec2e8c.js.map': {
source: '[AbsolutePathToProject]/dist/main.95ec2e8c.js.map',
destination: '[AbsolutePathToProject]/dist/js/main.95ec2e8c.js.map',
replacer: '/js/main.95ec2e8c.js.map',
mapFile: true,
dependents: null,
config: { match: '*.{js,js.map}', folder: 'js' }
},
'/main.bb27b9fc.css': {
source: '[AbsolutePathToProject]/dist/main.bb27b9fc.css',
destination: '[AbsolutePathToProject]/dist/css/main.bb27b9fc.css',
replacer: '/css/main.bb27b9fc.css',
mapFile: false,
dependents: [ '/main.bb27b9fc.css.map' ],
config: { match: '*.{css,css.map}', folder: 'css' }
},
'/main.bb27b9fc.css.map': {
source: '[AbsolutePathToProject]/dist/main.bb27b9fc.css.map',
destination: '[AbsolutePathToProject]/dist/css/main.bb27b9fc.css.map',
replacer: '/css/main.bb27b9fc.css.map',
mapFile: true,
dependents: null,
config: { match: '*.{css,css.map}', folder: 'css' }
}
}
Structurization complete. Modified 4 files in 6ms
- Moved 2 files to dist/js
- Moved 2 files to dist/css
If you loved the plugin, do consider starring the repository:
https://github.com/samrith-s/parcel-plugin-structurize
Think something could be improved? Create an issue on our repository:
http://bit.ly/parcel-plugin-structurize-feature-request
Any idea how this happened? Am I doing something wrong here?
Thanks a lot and take care,
best,
Jules