Comments (8)
@lkdnvc The image paths in the critical css are currently rewritten to absolute urls so you should configure your base option to reflect your server docroot.
E.g. asuming your local dev directory structure to be something like this:
/var/www/somedomain.com/
├── package.json
├── node_modules/...
├── ...
└── dist/
└── sometext/
└── my-site/
your base option should be set to dist
base: 'dist/'
from critical.
@lkdnvc Any progresses on this subject?
Thanks in advance.
from critical.
@bezoerb and the output has to be absolute? can't be a relative directory, so I wouldn't change it when in production?
from critical.
@juanbrujo as we don't know the path to the HTML file relative to the document root there's no robust solution for computing the asset path relative to the HTML right now but you can configure a relative path prefix to achieve this when you use the current master of critical.
See https://github.com/addyosmani/critical#options
from critical.
@juanbrujo we made some progress on this topic. The asset paths inside the critical css should now stay relative in case they were relative in the original css. Could you check the vinyl
branch if this fixes your issue?
npm install --save-dev git+https://github.com/addyosmani/critical.git#vinyl
from critical.
@bezoerb ok tested it and it's working fine but a couple of concerns. this is my folder structure (test):
and this is the config (I'm forcing the height
to test the output):
critical.generate({
inline: true,
base: 'dist/',
src: 'index.html',
dest: 'index-critical.html',
width: 1300,
height: 1200
});
as you can see even if base
is in dist/
the file output is being created in the project root directory. With that result, assets url's are being created like if it would reside inside dist/
:
.incognito .box-producto:before {
background-image: url(assets/images/sprites.png);
background-position: 0 0;
...
(I hope I was clear explaining 😰)
from critical.
@juanbrujo good point. Thanks for the detailed explanation :) Currently the src file is resolved relative to base
and the dest file gets written relative to process.cwd
which somehow doesn't make sense as the relative asset paths are computed relative to src. I think this needs a bit more concept ;)
from critical.
@juanbrujo sorry for the late response. This should be fixed by now. dest
path is now computed relative to base directory.
I'm closing this for now. Feel free to reopen if there's anything we missed to fix.
from critical.
Related Issues (20)
- critical just stucks at loading and does nothing HOT 2
- Remove query string from stylesheet path
- Print stylesheet unexpectedly gets `onload` attribute HOT 3
- Generated CSS is big HOT 8
- 'noscript)>[rel="stylesheet"]' is not a valid selector HOT 6
- Generate ciritical for multiple pages HOT 2
- Request: Add option to disable link media attribute wrapping HOT 1
- Rules within media queries duplicate when using multiple dimensions HOT 2
- Lots of css generated from below the fold
- Does not take redirects into account when looking for relative CSS HOT 2
- Does not take the <base HTML tag into account when looking for relative CSS HOT 7
- dimensions don't work HOT 2
- Error: Failed to launch the browser process! HOT 3
- typescript support ? HOT 1
- Add the option of a prefix path HOT 3
- On @container queries
- PageSpeed Insights consider CSS not deferred HOT 1
- Allowing internal functions to be imported HOT 3
- [✨] feat: Add the option of pass plain css HOT 2
- Several warnings appear when installing the latest version of critical HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from critical.