世博反应式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。