ReactJS - ввод CSS из корня

#css #reactjs

Вопрос:

Кажется, это очень простой вопрос, но сегодня я все еще не могу на него ответить.

Мне нужно из корня сделать что-то вроде import index.css; from main.tsx . Делая это, я должен иметь возможность из любого дочернего элемента root делать что-то как:

 <div className="anyStyle" />

Однако, на данный момент, я могу импортировать только из «side css». Я понимаю, что reactjs в основном предназначен для использования tsx / css для каждого компонента, но мне нужно что-то немного другое для варианта использования 🙂

Спасибо

Ответ №1:

Вы можете импортировать css-файл в родительский компонент, и он должен применяться к каждому дочернему компоненту. Вы можете использовать пакет, такой как webpack, для чтения импорта css и его соответствующей загрузки загрузите файл css с помощью webpack guide

 import '../styles.css'

export default function App() {
    return (
        <main></main>
    )
}

Вы также можете импортировать стиль css непосредственно в html.

 <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="root"></div>
<script type="text/javascript" src="react.js"></script>
</body>
</html>

Простая конфигурация веб-пакета:

 module.exports = {
  entry: {
    bundle: './src/app.tsx'
  },
  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['*', '.ts', '.tsx', '.js']
  },
  module: {
      rules: [
          /*
           * Typsecript files. 
           */
          {
              test: /.ts(x?)$/,
              exclude: /node_modules/,
              use: [
                  {
                      loader: "ts-loader"
                  }
              ]
          },
          {
            enforce: "pre",
            test: /.js$/,
            loader: "source-map-loader"
        },
          /*
           * misc Files. 
           */
          {
              test: /.(png|svg|jpg|gif|ttf|otf)$/,
              exclude: /node_modules/,
              use: [
                'file-loader'
              ]
          },
           /*
           * CSS Files. 
           */
          {
              test: /.css$/,
              exclude: /node_modules/,
              use: [
                'style-loader',
                'css-loader',
                "postcss-loader"
            ]
          }
      ]
  },
  plugins: [
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
};

Загрузка с помощью npm:

 npm i style-loader css-loader postcss-loader

1. Привет, спасибо, я использую webpack и в настоящее время пытаюсь изменить конфигурацию, но не могу найти способ. Не могли бы вы уточнить содержимое конфигурации вашего webpack, а также содержимое вашего style.css, пожалуйста? 🙂

2. спасибо, что означает <main/> ? (извините, я совсем новичок)

3. <main> — это тег html5, почти такой же, как <div> или <s pan>. Он просто используется для придания большей описательности html-докум енту. Тег <main> определяет основное содержимое документа, а содержимое внутри элемента <main> должно быть уникальным для документа.

Ответ №2:

Вы можете использовать webpack, который вы, вероятно, уже используете, который включается, когда вы основываете свой проект на create-react-app, что вы, вероятно, тоже уже делаете 🙂

С помощью этого вы можете просто импортировать файл css, как и любой другой компонент. Допустим, у вас есть index.css файл с этим содержимым:

 .anyStyle: {
  margin: 20px;
}

Теперь в любом компоненте вы можете выполнить следующее:

 import React, { Component } from 'react';
import './index.css';

class Main extends Component {
  render() {
    return <div className="anyStyle" />;
  }
}

Редактировать: вот ссылка, объясняющая, как использовать css-loader с webpack и как настроить его в вашем webpack.config, который уже является частью create-react-app afaik.

1. Привет 🙂 Спасибо, это то, чего я хочу достичь, но это не работает .. Не могли бы вы уточнить конфигурацию вашего webpack? Мой близок к github.com/Emixam23/react-mobx-typescript-boilerplate/blob /…

2. @Emixam23 Я отредактировал свой ответ ссылкой, объясняющей, как установить css-loader и как отредактировать конфигурацию, это то, что вам нужно?