Redefine media query breakpoints doesn't work

[Rodimusbot]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Install react nextjs and antd. Add a custom less file to redefine variables.

My .less file

@import '~antd/dist/antd.less';

@border-radius-base: 11px;

@primary-color: #a00;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 320px;
@screen-xs-min: @screen-xs;

// Small screen / tablet
@screen-sm: 375px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 1024px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1440px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

=====================================
I've createad myRow component

import React from 'react';
import { Row, Col } from 'antd';

const style = { background: '#3a3', padding: '8px 0' };

export default () => (
<Row gutter={{
xs: 10, sm: 24, md: 26, lg: 28, xl: 30,
}}

<Col className="gutter-row" span={6}>
  <div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
  <div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
  <div style={style}>col-6</div>
</Col>
<Col className="gutter-row" span={6}>
  <div style={style}>col-6</div>
</Col>

);

Than I've used myRow in index.js

What is expected?

I expect my breakpoints to work and be applied to all the project and all components.
In current case - different gutters on a given (redefined) breakpoints. So gutter of 10 should be applied on the width of 320px

What is actually happening?

No redefinition happens.

Environment	Info
antd	4.0.3
React	latest
System	Mac OS
Browser	Chrome

[prashantnl]

+1

[cjhaddad]

Any progress on this? I am finding my media queries, defined the exact same way to also not be working.

[prashantnl]

Any progress on this? I am finding my media queries, defined the exact same way to also not be working.

Yes got it working finally. 👯‍♂️

my variable.less

@import '../../node_modules/antd/lib/style/themes/default.less';

@primary-color: rgb(249, 96,44);
@secondary-color: #28a996;
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@heading-color: rgba(0, 0, 0, 0.85);
@layout-body-background: #EEEEEE;
@btn-primary-bg: rgb(249, 96,44);
@layout-header-background: #4DD0E1;
@link-color: #f9602c; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers
@screen-xxl: 1920px; // break point for xxl screen (by default is >=1600px)

webpack.js

/**

• COMMON WEBPACK CONFIGURATION
  */

const path = require('path');
const webpack = require('webpack');
const fs = require('fs');

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(
fs.readFileSync(
path.resolve(process.cwd(), 'app/styles/variables.less'),
'utf8',
),
);
module.exports = options => ({
mode: options.mode,
entry: options.entry,
output: Object.assign(
{
// Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
},
options.output,
), // Merge with env dependent settings
optimization: options.optimization,
module: {
rules: [
{
test: /.jsx?$/, // Transform all .js and .jsx files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: options.babelQuery,
},
},
{
test: /.tsx?$/,
loader: 'ts-loader',
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /.scss$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /.less$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: !isProduction,
},
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: !isProduction,
},
},
{
loader: 'less-loader',
options: {
modifyVars: themeVariables,
javascriptEnabled: true,
},
},
],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
type: 'javascript/auto',
test: /.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
noquotes: true,
},
},
],
},
{
test: /.(jpeg|png|gif|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
enabled: false,
// NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// Try enabling it in your environment by switching the config to:
// enabled: true,
// progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /.html$/,
use: 'html-loader',
},
{
test: /.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
],
},
plugins: options.plugins.concat([
// Always expose NODE_ENV to webpack, in order to use process.env.NODE_ENV
// inside your code for any environment checks; Terser will automatically
// drop any unreachable code.
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
]),
resolve: {
modules: ['node_modules', 'app'],
extensions: ['.js', '.jsx', '.react.js', '.tsx', '.ts'],
mainFields: ['browser', 'jsnext:main', 'main'],
plugins: [
new TsconfigPathsPlugin({
configFile: path.join(process.cwd(), '/tsconfig.json'),
}),
],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty',
},
});

[afc163]

Supported in #39105