如何解决世博反应式CSS加载器
我对Expo和React-native非常陌生。我在使用css-loader将样式加载为模块时遇到问题。我做了很多尝试,以Expo documentation来自定义webpack.config.js,但这是行不通的!
如果有人可以提供帮助,我将非常感激,因为我花了很多次在这个问题上……
再现问题:
expo init my-app
我的webpack.config.js
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
module.exports = async function (env,argv) {
const config = await createExpoWebpackConfigAsync(
{
...env,module: {
rules: [
{
test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
loader: "babel-loader"
}
},{
test: /\.css$/,loader: "style-loader"
},loader: "css-loader",options: {
modules: true,}
}
],},extensions: [ '.web.js','.js','.jsx','.css' ],argv
);
return config;
};
我的组件:menu.jsx
import React from 'react';
import styles from './menu.module.css';
console.log(styles); // Displaying {}
class Menu extends React.Component {
render() {
return <div className={styles.red}>a</div>
}
}
export default Menu;
我的风格:menu.module.css
.red {
width: 300px;
height: 300px;
display: block;
background-color: red;
}
解决方法
- 不幸的是,css-loader无法与react-native / expo一起使用。 有关样式的更多信息,请关注react-native docs
如果您想编写像普通CSS一样的样式,请查看styled-componenet
- div标签不能与react-native一起使用。div中的替换 react-native我们有View和fragment。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。