Comments (7)
nucliweb
commented on August 28, 2024
You need different values in the queries object.
Like this:
postCss: [
require('postcss-extract-media-query')({
output: {
path: path.join(__dirname, '/public/css'),
name: '[query].css'
},
queries: {
'only screen and (min-width: 1023px)': 'desktop-1023px',
'only screen and (min-width: 1460px)': 'desktop-1023px',
'only screen and (min-width: 1800px)': 'desktop-1800px',
'only screen and (min-width: 1870px)': 'desktop-1870px',
'only screen and (min-width: 2100px)': 'desktop-2100px',
'only screen and (min-width: 2400px)': 'desktop-2400px'
},
extractAll: false
}),
],Btw, depending on the contents. I think that you can use fewer queries, like:
postCss: [
require('postcss-extract-media-query')({
output: {
path: path.join(__dirname, '/public/css'),
name: '[query].css'
},
queries: {
'only screen and (min-width: 1023px)': 'desktop-1023px',
'only screen and (min-width: 1800px)': 'desktop-1800px',
'only screen and (min-width: 2100px)': 'desktop-2100px'
},
extractAll: false
}),
],from postcss-extract-media-query.
EugenGedroyc
commented on August 28, 2024
@nucliweb ,thank you for answer, but the problem persists.
It is desktop-1870px.css :
@media only screen and (min-width: 1870px) {
.game-stats-header::before {
width: 24rem;
}
.game-stats-header__title span {
display: block;
}
.game-stats-header__title svg {
top: -0.35rem;
}
}
@media only screen and (min-width: 1870px) {
.game-stats-header::before {
width: 24rem;
}
.game-stats-header__title span {
display: block;
}
.game-stats-header__title svg {
top: -0.35rem;
}
}
console:
[extracted media query] desktop-1023px.css
[extracted media query] desktop-1800px.css
[extracted media query] desktop-2100px.css
[extracted media query] desktop-1460px.css
[extracted media query] desktop-2400px.css
[extracted media query] desktop-1870px.css
[extracted media query] desktop-1023px.css
[extracted media query] desktop-1800px.css
[extracted media query] desktop-2100px.css
[extracted media query] desktop-1460px.css
[extracted media query] desktop-2400px.css
[extracted media query] desktop-1870px.css
I disabled all configuration in webpack.mix.js besides this:
mix.less('resources/less/app.less', 'public/css')
//.less('resources/less/plugins.less', 'public/css') this [extracted media query] third time
.options({
postCss: [
require('postcss-extract-media-query')({
output: {
path: path.join(__dirname, '/public/css'),
name: '[query].css'
},
queries: {
'only screen and (min-width: 1023px)': 'desktop-1023px',
'only screen and (min-width: 1460px)': 'desktop-1460px',
'only screen and (min-width: 1800px)': 'desktop-1800px',
'only screen and (min-width: 1870px)': 'desktop-1870px',
'only screen and (min-width: 2100px)': 'desktop-2100px',
'only screen and (min-width: 2400px)': 'desktop-2400px'
},
extractAll: false
}),
],
})
Is it incompatible with laravel mix?
from postcss-extract-media-query.
haipham
commented on August 28, 2024
Yes. Duplicate media query with Laravel Mix.
from postcss-extract-media-query.
elambro
commented on August 28, 2024
Did anyone find a solution for this?
from postcss-extract-media-query.
haipham
commented on August 28, 2024
Did anyone find a solution for this?
Webpack version:
https://github.com/SassNinja/media-query-plugin
from postcss-extract-media-query.
yunusga
commented on August 28, 2024
@EugenGedroyc @elambro If I understand correctly, then you need to first perform the merging of media queries with postcss-sort-media-queries, plugin sort and combine same media queries into one and then use postcss-extract-media-query.
from postcss-extract-media-query.
elambro
commented on August 28, 2024
I wrote a new package for this - Extract CSS Media Queries
and a Laravel Mix extension - Laravel Mix Extract Media Queries
I hope they can help some of you. @EugenGedroyc - My first webpack plugin and my first published npm package!
from postcss-extract-media-query.
Related Issues (20)
- extractAll not working HOT 3
- Possibility to leave original file intact? HOT 2
- Keep the media in same file HOT 2
- extractAll query mismatch HOT 1
- media css files generated but default.css missing HOT 1
- README file suggests this approach has a bigger performance impact than it actually does HOT 2
- Rules get applied every time a new file is processed HOT 3
- Unknown error, different PostCSS versions HOT 1
- Is it possible to use several entries? HOT 2
- Proposal: attach processing to OnceExit hook
- Plugin + Foundation setup HOT 13
- Webpack & entrypoints.json HOT 2
- Sass files in dist folder (Using Vite example) HOT 1
- Not creating css file for all other styles HOT 1
- Omit media query in final output HOT 2
- Invalid PostCSS Plugin found HOT 3
- Can this be used to only combine media queries? HOT 1
- File naming gets confused if source file names have more than one dot in them HOT 1
- Multiple media queries into one file. HOT 2
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 postcss-extract-media-query.