css - 如何在 React 应用程序中加载 css？

Question

我使用 create-react-app 创建了一个 React 应用程序一切正常，只是我不知道如何加载 css/stylus 文件。

在我之前不是使用 create-react-app 创建的 React 元素中，我使用了 webpack.config 但现在我不知道在哪里包含这个文件以及如何使用它。

这是我的文件夹结构:

.  
+--client  
|  +--node_modules
|  +--public
|  +--src
|  +--package.json
+--server
|  +--node_modules
|  +--src
|  +--.babelrc
|  +--package.json

这是我之前的webpack.config.dev.js文件:

import path from 'path';
import webpack from 'webpack';

export default {
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, '/client/index.js')
  ],
  output: {
    filename: 'bundle.js',
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'client'),
        loader: 'babel-loader',
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'stylus-loader',
          },
        ],
      },
      {
        test: /\.css?$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [ '.js', '.styl' ]
  }
}

如果我需要提供其他信息，请告诉我。

Answer 1

在他们的文档中有关于如何将 SCSS 和 Less 文件添加到 create-react-app 元素的详细信息。你可以查看here了解更多详情。

您只需导入文件即可添加基本的 CSS 样式，如下所示；

import '/css/main.css';

或者你可以添加为 classNames

const styles = {
   header: {
     fontSize: 18,
     color: '#909090',
   }
 };

 export default class Header extends React.Component {
   render() {
     return (
       <h1 className={styles.header}>This is a header</h1>
     );
   }
 }