[英]Expo react-native use css-loader
我对 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;
}
如果你想写像普通 css 一样的风格,看看styled-componenet
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.