Expo react-native 使用 css-loader

Question

我對 Expo 和 react-native 很陌生。 我在使用 css-loader 加載 styles 作為模塊時遇到問題。 我嘗試了很多方法來使用Expo 文檔自定義 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"
                    },
                    {
                        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;

我的風格：menu.module.css

.red {
    width: 300px;
    height: 300px;
    display: block;
    background-color: red;
}

Answer 1

• 不幸的是，css-loader 不適用於 react-native/expo。 有關樣式的更多信息，請遵循react-native 文檔

如果你想寫像普通 css 一樣的風格，看看styled-componenet

• div 標簽不適用於 react-native。在 react-native 中替換 div 我們有視圖和片段。