React antdesign @media запрос не работает

Я работаю с реактивным дизайном муравьев, и я использую запросы @media для стилизации, но он продолжает выдавать ошибку, указанную ниже

#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.

Я предоставил связанные файлы ниже

------------ файл styles.less ---------------

@media only screen и (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 и (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
  }
};
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
0
2 193
1

Ответы 1

Это часто указывает на синтаксическую ошибку. Пожалуйста, обратите внимание на «Кнопку». У него есть свойство под названием «marginBottom», переименуйте его в margin-bottom, пожалуйста, также добавьте точку с запятой после оператора (хотя это не должно иметь значения). Кроме того, вы должны переименовать «Button» в «button», а «Input» - на «input».

Привет, я тестировал его только с тегом h4, но он все равно выдает эту ошибку даже без всех других стилей.

Oshani Silva 13.08.2018 07:24

Другие вопросы по теме