css - react antdesign @media 查询不起作用

Question

我正在使用 react ant-design 并使用@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 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

这通常表示语法错误。请看一下“按钮”。它有一个名为'marginBottom'的属性，将其重命名为margin-bottom，请在语句后添加一个分号(尽管这应该没有什么区别)。此外，您应该将“按钮”重命名为“按钮”，将“输入”重命名为“输入”。