React antdesign #media query not working - css

Question

I'm working with react ant-design and I'm using #media queries for styling but it keeps throwing the error given below
#btn {
^
Media definitions require block statements after any features
in /home/osh/WebstormProjects/ant-design-kickstart/src/styles/styles.less (line 69, column 8)
# ./src/styles/styles.less 2:14-142 21:1-42:3 22:19-147
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:8081 (webpack)/hot/dev-server.js react-hot-loader/patch ./src/index.js
Failed to compile.
I have given the related files below
------------styles.less file---------------
#media only screen and (max-width: 768px) {
#btn {
width: 50%;
margin-top: 200px;
align-self: center;
}
Button {
width: 1000%;
marginBottom: '25px'
}
Input {
align-self: center;
width: 250px;
}
h4 {
color: #5400ff;
}
.appDashCard {
background: #fff;
padding: 10%;
/*//minHeight: 280px;*/
align-content: center;
}
}
#media only screen and (min-width: 768px) {
#btn {
width: inherit;
margin-right: 30px;
margin-left: 400px;
margin-top: 30px;
}
h4 {
color: #ff2600;
}
.appDashCard {
background: #fff;
padding: 24px;
minHeight: 280px;
}
.selectBox {
width: 100%;
}
}
----------package.json----------
{
"name": "ant-design-kickstart",
"version": "1.0.0",
"description": "An opinionated starter-kit for Ant Design",
"scripts": {
"start": "webpack-dev-server --config ./webpack.dev.js --mode development",
"build": "webpack --config ./webpack.prod.js --mode production",
"precommit": "pretty-quick --staged"
},
"author": "Madusha Prasanjith",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-import": "^1.6.7",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"husky": "^0.14.3",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"less-vars-to-js": "^1.2.1",
"prettier": "1.11.1",
"pretty-quick": "^1.4.1",
"react-hot-loader": "^4.0.0",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.3.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"antd": "^3.3.3",
"axios": "^0.18.0",
"media-queries": "^1.0.5",
"moment": "^2.21.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"style-loader": "^0.20.3"
}
}
-----------webpack.dev.js----------
const webpack = require("webpack");
const path = require("path");
const fs = require("fs");
const lessToJs = require("less-vars-to-js");
const themeVariables = lessToJs(
// fs.readFileSync(path.join(__dirname, "./src/styles/ant-default-vars.less"), "utf8")
fs.readFileSync(path.join(__dirname, "./src/styles/styles.less"), "utf8")
);
module.exports = {
entry: ["react-hot-loader/patch", "./src/index.js"],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "less-loader",
options: {
sourceMap: true,
modifyVars: themeVariables,
javascriptEnabled: true
}
}
]
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: "url-loader",
options: {
limit: 10000
}
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "bundle.js"
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: "./dist",
hot: true
}
};

Answer 1

This often indicates a syntax error. Please take a look at 'Button'. It has a property called 'marginBottom', rename it to margin-bottom, please also add a semicolon after the statement (although that shouldn't make a difference). Also, you should rename 'Button' to 'button' and 'Input' to 'input'.