Почему «дисплей: нет! Важно» здесь не работает?

Question

Таблица стилей действительно проста, поэтому я не знаю, что может повлиять на результат. Я проверил стиль в «элементах». Кажется, я не могу перезаписать «display: block» в таблице стилей агента пользователя, хотя я использовал «! Important».

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

Вам нужен меньше загрузчик. Как то так https://medium.com/@joseph0crick/react-css-modules-less-webpack-4-a50d902d0a3

Answer 2

Ни один из ваших стилей не применяется, и это потому, что стандартный шаблон кодов и ящиков (я полагаю, основан на приложении Create React) не поддерживает меньше.

Это немного вводит в заблуждение, потому что это не выдает ошибку, но на самом деле он импортирует файл как обычный текст, не устанавливая его как стиль.

Два способа убедиться в этом, это то, что вы можете сделать важный текст:

import less_text from './styles.less';

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

Который будет регистрировать контексты меньшего файла, даже без транспиляции.
Что вы могли бы сделать сейчас, так как я не знаю, как использовать шаблон, который поддерживает меньше, это изменить его на CSS сейчас. Если вы переместите .hide { ... } в корень файла CSS и импортируете его как import 'styles.css', ваши стили будут применены:)

Answer 3

Я думаю, проблема в том, что вам не хватает процессора. По умолчанию браузер не понимает меньше, и если вы используете webpsck, вам нужен загрузчик для него

Answer 4

Создание приложения реакции 2 (CRA2) поддерживает SASS из коробки. Я предполагаю, что официально CRA2 не поддерживает LESS. Так что, если вам нужен именно МЕНЬШИЙ, вы можете использовать response-app-rewired . Этот пакет перезаписывает конфигурацию веб-пакета без извлечения.