我一直在尝试通过转换使用纯HTML和CSS构建的网页来学习React。我目前正在使用CSS模块，但是注入<style>标签中的某些CSS似乎格式不正确：image。奇怪的是，它不会影响所有CSS类。
我四处寻找，因为看起来好像没有应用某些CSS，该组件当前看起来像这样，但是应该看起来像这样。
我的React组件的结构如下：
├── compA
├── index.tsx
└── styles.css
├── compB
├── index.tsx
└── style.css
而我在进口与TSX文件的CSS文件：import "./style.css";。我在这里想念什么？
webpack.config.js：
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
...
entry: {
main: "./src/index.tsx",
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
plugins: [
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, "./tsconfig.json"),
extensions: [".ts", ".tsx"]
})
],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: { modules: true }
}
]
}
],
}
};这就是CSS模块的行为，因为这样做的目的是让您像导入JS一样导入CSS模块：
.foo {
background: red;
}
import styles from './foo.css'
export default () => <div className={styles.foo} />
而不是使用classNames作为字符串。名称修改是为了避免冲突，因为CSS中没有真正的作用域。要保留类名，可以使用:global：
:global(.foo) {
background: red;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句