0

所以我刚刚开始学习 React，我正在尝试合并一个 CSS 文件来设置一个 React 组件（即侧边栏）的样式，但我不确定为什么网页上没有显示任何样式。我已经尝试在 index.js 文件中内联 css 并且它有效，但我正在尝试将所有样式代码移动到 css 文件中。我安装了一个 sass 加载器和 css 加载器，并将它们包含在 webpack.config.js 文件中。我只是忘记了一些愚蠢的事情吗？

这是我的 style.css 文件

.sidebar {
    position: fixed;
    height: 200px;
    font-size: 20;
    width: 60px;
    background-color: deepskyblue;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: azure;
}

li {
    display: block;
    color: gray;
    padding: 8px;
    font-size: 20;
    text-decoration: none;
}

li :hover {
    background-color: forestgreen;
}

还有我的 index.js 文件

import React from 'react'
import {styles} from './style.css'
import Home from './home.js'

export class Sidebar extends React.Component {
    render() {
        return (  
            <div className={styles.sidebar}>
                <ul>
                    <li>Home</li>
                    <li>Test1</li>
                    <li>Test2</li>
                </ul>
            </div>
        )   
    }
}
4

2 回答 2

0

您提到您的 webpack.config.js 文件中有 CSSLoader。首先，让我们确认您有与我类似的东西：

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

现在，每次你运行 webpack 服务器时，开发包都会包含你的样式。有了这个，你应该能够导入我在 React 文件中引用它们的 css 文件：

import './MyComponent.css'

const MyComponent = () => {...};

如果一切都还是一样，但仍然无法正常工作，我强烈推荐create-react-app，这是一个让您专注于学习 React 而无需过多关注配置细节的轻松解决方案。Create React 应用程序包括 CSS 导入和 Jest 测试等。

于 2018-02-23T02:22:33.470 回答
0

无需styles.sidebar像对象一样调用，只需导入文件并分配className为普通类....

import './style.css';

// [...]
<div className='sidebar'>
于 2018-02-23T00:49:40.710 回答