Где найти скомпилированный файл css в приложении React?

Question

Я знаю, что в Blazor, если установлен веб-компилятор, все файлы s css можно скомпилировать и вывести в файл css, скажем, у меня есть Sidebar.scss, Card.scss, Tile.scss, тогда они могут быть скомпилированы в 1 css файл с именем site.css.

Q1: есть ли способ сделать то же, что и выше, для вывода 1 css файл содержит все скомпилированные css?

Q2: Теперь у меня есть 1 s css файл для каждого компонента, но я не могу найти скомпилированные css файлы для каждого из них, т.е. я не вижу Sidebar.css, скомпилированного из Sidebar.scss.

РЕДАКТИРОВАТЬ: я использую node-sass, как здесь представлено https://create-react-app.dev/docs/adding-a-sass-stylesheet/, поэтому для Sidebar.js у меня есть Sidebar.scss, а когда файл s css сохраняется, стиль применяется автоматически

Answer 1

Смотрите в react native, стили работают по-другому, это не CSS, который вы применяете, скорее сначала вы импортируете таблицу стилей:

1. import { StyleSheet, Text, View } from "react-native";

Затем вы создаете стили из таблицы стилей например:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"
  }
});

Так что это похоже на css, но не совсем CSs, поэтому вы его не найдете. скомпилирован css, так как это функция и встроенный компонент react native.

Вы всегда можете преобразовать ваш sass / s css в собственный стиль с помощью этого sass-transformer

Он принимает s css как:

.myClass {
  color: blue;
}
.myOtherClass {
  color: red;
}

и конвертирует его в

var styles = {
  myClass: {
    color: "blue"
  },
  myOtherClass: {
    color: "red"
  }
};

Надеюсь, это ясно. не стесняйтесь сомневаться