为什么“显示：无！重要”在这里不起作用？

Question

样式表非常简单，所以我不知道会导致结果混乱。我在“元素”中检查了样式。即使我使用了“！important”，我似乎也无法覆盖用户代理样式表中的“ display：block”。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.less";

function App() {
  return (
    <div className="App">
      <div className="hide">Hello CodeSandbox</div>
    </div>
  );
}

样式表

.App {
  font-family: sans-serif;
  text-align: center;
  .hide {
    display: none !important;
  }
}

与环境的链接：

我希望“ Hello CodeSandbox”消失。

Answer 1

Create react app 2（CRA2）开箱即用地支持SASS。 我认为CRA2正式不支持LESS。因此，如果您需要的电量很少，则可以使用react-app-rewired。该软件包将重写webpack配置，而不会弹出。

Answer 2

您的样式均未应用，这是因为默认的codeandbox模板（我猜是基于Create React App）不支持较少。

这有点误导，因为它不会引发错误，但是实际上是将文件导入为纯文本，而没有将其设置为样式。

有两种方法可以看到这一点，那就是您可以使实际文本很重要：

import less_text from './styles.less';

console.log('less_text:', less_text);

这将记录less文件的上下文，甚至不进行编译。
由于我不知道如何使用支持较少的模板，您现在可以做的是现在将其更改为CSS。如果将.hide { ... }移至css文件的根目录，并以import 'styles.css'的格式导入，则您的样式会得到应用：）

Answer 3

我认为问题是您缺少处理器。默认情况下，浏览器对它的了解不多，如果您使用webpsck，则需要加载程序

Answer 4

您需要更少的装载机。像这样的https://medium.com/@joseph0crick/react-css-modules-less-webpack-4-a50d902d0a3