Javascript Expo react本地使用css加载程序

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

我对世博会很陌生,而且是本地人。我面临一个问题,如何使用css加载程序将样式作为模块加载。我尝试了很多方法来定制webpack.config.js,但都没有成功

如果有人能帮助我,我会非常感激,因为我花了这么多时间在这个问题上

复制问题:

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一起使用。 有关样式设置的更多信息,请参见
如果你想写的风格像正常的css,看看

  • div标记不能与react-native一起使用。替换中的div 我们有视图和片段

世博会是否有css加载器的替代品?我在看“react native css transformer”,你知道这是否有效吗?我试过了,但我无法让它工作…react原生css transformer是metro插件。而且它可以与本机一起工作。它不能与expo一起工作。为什么css加载器不能工作?虽然RNW组件使用自定义样式解决方案,但您仍然可以使用外部css和类名为HTML/React组件设置样式
.red {
    width: 300px;
    height: 300px;
    display: block;
    background-color: red;
}