CODEWITHSUNDEEP
javascriptreact-nativewebpackexpo
Laura
Laura

Reputation: 11

Expo react-native use css-loader

I am pretty new with Expo and react-native. I am facing a problem to load styles as module with css-loader. I tried a lot of things to customize the webpack.config.js with Expo documentation but it doesn't work !

If someone can help, I would be so grateful because I spent so many times on this problem...

Reproduce issue:

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;
};

My component: 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;

My style: menu.module.css

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

Upvotes: 1

Views: 4219

Answers (1)

Muhammad Iqbal
Muhammad Iqbal

Reputation: 1495

  • Unfortunately css-loader won't work with react-native/expo. for more information regarding styling Follow react-native docs

if you want to write style like normal css, have a look on styled-componenet

  • div tag will not work with react-native.Replacement of div in react-native we have View and fragment.

Upvotes: 2

Related Questions