将 CSS 添加到 ReactJS 项目中

Question

我在这里使用教程作为基础，但我没有任何关于如何将 css 文件导入应用程序的示例。我找到了一些零碎的东西，但还不足以知道如何去做。我添加了“从'./styles/main.css'导入样式；”进入 App.jsx，我的 webpack 配置如下。

var css = require("css!./main.css");

var config = {
    entry: './main.js',

    output: {
        path:'./',
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',

                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: "style!css!"
            }
        ]
    }
}

module.exports = config;`

我得到错误：

./styles/main.css
模块解析失败：C:\Projects\reactApp\styles\main.css 意外令牌 (1:5)
您可能需要适当的加载程序来处理此文件类型。
SyntaxError: Unexpected token (1:5)

该文件现在只有div {}。

Answer 1

在你的 webpack 配置中你只需要添加 style-loader 和 css-loader （你需要先 npm install 它）：

{ test: /\.css$/, loader: 'style-loader!css-loader' },

然后您可以在 .js 文件（组件）中要求 CSS：

require('./styles/main.css');