假设我正在创建一个React应用程序，并为组件添加了一些CSS，我已经将样式加载器和css-loader添加到了我的webpack配置中：
module.exports = {
mode: 'development',
entry: './client/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}, {
test: /\.css$/,
loader: 'style-loader'
}, {
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
},
devtool:"#eval-source-map"
};我有一个简单的CSS文件，只是为了测试一个组件：
.list-group-item {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}在我的应用程序中，我将类名应用于组件中的元素并导入CSS
import React, { Component } from 'react'
import { connect } from 'react-redux'
import selectContact from '../actions/action_select_contact'
import { bindActionCreators } from 'redux'
import '../styles.css';
class ContactList extends Component {
renderList() {
return this.props.contacts.map((contact) => {
return (
<li
key={contact.phone}
onClick={() => this.props.selectContact(contact)}
className='list-group-item'>{contact.firstName} {contact.lastName}</li>
);
});
}
render() {
return (
<ul className = 'list-group col-sm-4'>
{this.renderList()}
</ul>
);
}
}
function mapStateToProps(state) {
return {
contacts: state.contacts
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ selectContact: selectContact }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(ContactList)我还以同样的方式将CSS文件导入ContactList组件本身。项目的其余部分是here。我本希望在我的contactsList周围看到一个轮廓，但没有。当我检查页面时，没有CSS。为什么没有应用它？
5条答案
按热度按时间hgb9j2n61#
在用create-react-app或npx create-react-app创建的react项目中，我也遇到了同样的问题。
我已将index. css文件导入到我的App Component中，但我的样式未正确应用到我的React Components。
我甚至尝试直接在public文件夹的html文件中添加index.css文件，并使用link标记链接到index.css文件（位于src文件夹中）。
那也不管用。
最后，我读了一篇关于7种将CSS应用到React中的方法的文章。其中一种最好的方法是将node-sass安装到我们的项目中，并在App Component中使用index.scss（import './index.scss'）而不是index.css。
万岁!!!我的CSS工作得很好，所有的媒体查询开始工作得很好。
下面是您可以尝试的代码片段。
x一个一个一个一个x一个一个二个x
要安装node-sass，只需执行
npm install node-sass --save，然后将所有的**. css文件重命名为. scss**，这样您的项目就可以正常工作了。希望这对很多开发者有帮助：）
lymnna712#
查看React组件也会很有帮助。
对于以下代码，您将className作为属性传递到组件中，而不是为其分配类：
在组件内部，您需要对组件内部的常规HTML标记使用
className={this.props.className}，以便传递className。e0uiprwp3#
您可以直接将特定的css文件添加到index.js中（如
import './master.css'）。7kjnsjlb4#
根据这里的react文档，className可以应用于所有DOM常规元素，如
<div>、<a>...你的CSS可以和常规的标签
<div className='contactList'>hello</div>一起使用吗？envsm3lx5#
这花了我一点时间，但是将下面的代码添加到
public目录下的index.html对我来说是有效的。