[英]Expo react-native use css-loader
I am pretty new with Expo and react-native.我对 Expo 和 react-native 很陌生。 I am facing a problem to load styles as module with css-loader.
我在使用 css-loader 加载 styles 作为模块时遇到问题。 I tried a lot of things to customize the webpack.config.js with Expo documentation but it doesn't work !
我尝试了很多方法来使用Expo 文档自定义 webpack.config.js,但它不起作用!
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我的 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我的组件: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我的风格:menu.module.css
.red {
width: 300px;
height: 300px;
display: block;
background-color: red;
}
if you want to write style like normal css, have a look on styled-componenet如果你想写像普通 css 一样的风格,看看styled-componenet
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.