如何在反应app中加载css？

Question

我使用create-react-app创建了一个反应应用程序，并且一切正常，但我无法弄清楚如何加载css/stylus文件。

在我之前使用create-react-app创建的反应项目中，我使用了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> 
    ); 
    } 
} 

Answer 2

的方法之一，从您的JS文件包括加载CSS文件（通过CSS加载器），用于Text.jsx

import React from 'react'; 
import './screen.css'; // if screen.css is located next to Text.jsx 

class Text extends React.Component { 
    // ... 
} 

export default Text; 

你也可以产生输出CSS，例如使用ExtractTextPlugin（请参阅Webpack2 loading and extracting LESS file）