Javascript Expo react本地使用css加载程序
我对世博会很陌生,而且是本地人。我面临一个问题,如何使用css加载程序将样式作为模块加载。我尝试了很多方法来定制webpack.config.js,但都没有成功 如果有人能帮助我,我会非常感激,因为我花了这么多时间在这个问题上 复制问题:Javascript Expo react本地使用css加载程序,javascript,react-native,webpack,expo,Javascript,React Native,Webpack,Expo,我对世博会很陌生,而且是本地人。我面临一个问题,如何使用css加载程序将样式作为模块加载。我尝试了很多方法来定制webpack.config.js,但都没有成功 如果有人能帮助我,我会非常感激,因为我花了这么多时间在这个问题上 复制问题: expo init my-app My webpack.config.js const createExpoWebpackConfigAsync = require('@expo/webpack-config'); module.exports = asy
expo init my-app
My 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"
},
{
test: /\.css$/,
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;
- 不幸的是,css加载程序无法与react native/expo一起使用。 有关样式设置的更多信息,请参见
- div标记不能与react-native一起使用。替换中的div 我们有视图和片段
.red {
width: 300px;
height: 300px;
display: block;
background-color: red;
}