CSS模块错误使用Webpack，打字和反应？
CSS模块错误使用Webpack，打字和反应？
提问于 2021-01-10 18:30:03
我一直试图通过使用普通HTML和CSS构建的网页进行转换来学习反应。我目前正在使用CSS模块，但是注入到<style>标记中的一些CSS似乎有点不正确：图像。奇怪的是，它并没有影响所有的CSS类。
我四处寻找，因为它看起来有些CSS没有被应用，这个组件目前看起来像这，但应该看起来像这。
我的React组件的结构如下：
├── compA
├── index.tsx
└── styles.css
├── compB
├── index.tsx
└── style.css我用：import "./style.css";将CSS文件导入到TSX文件中。我在这里错过了什么？
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 }
}
]
}
],
}
};
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-10 19:56:17
这就是CSS模块的行为，因为您的意图是导入CSS模块，就像它们是JS一样：
.foo {
background: red;
}import styles from './foo.css'
export default () => <div className={styles.foo} />而不是使用classNames作为字符串。名称mangling是有意避免冲突的，因为CSS中没有真正的作用域。要保留类名，可以使用:global
:global(.foo) {
background: red;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65656956
复制相关文章
相似问题
腾讯云开发者
