[英]css modules not working even after ejecting create-react-app
我弹出了我的create-react-app以便使用CSS模块。 我从修改了webpack.config.dev.js
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true, //added this
localIdentName: "[name]__[local]___[hash:base64:5]" //added this
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
}
然后我尝试在我的组件之一中使用css模块
import React, { Component } from 'react';
import styles from './sidebar.css';
class MenuPanel extends Component {
render() {
return (
<div>
<div className={styles.navbarSide}>
<div className="tessact-logo"></div>
<div className="navbar-item active">
<a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
</div>
但是className navbarSide没有应用到div。 我看不到该特定div的className。 我究竟做错了什么? 理想情况下,div应该具有className navbarSide。
只需import { StyleSheet } from 'react-native';
添加import { StyleSheet } from 'react-native';
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import styles from './sidebar.css';
class MenuPanel extends Component {
render() {
return (
<div>
<div className={styles.navbarSide}>
<div className="tessact-logo"></div>
<div className="navbar-item active">
<a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.