标签: css-modules

我项目中的所有样式都是在 css 模块内定义的，直到最近我才注意到，在 Nextjs 生成的生产版本中，其中一些样式被其他样式覆盖（这只有在它们定义在同一模块上时才有意义，但事实并非如此）。这在生产中破坏了我的应用程序，但在开发中一切似乎都运行良好。

这是一个例子：

///mobile.module.css
 .expandIcon {
    width: 12px;
}

///mobile.tsx
import React from "react";
import styles from "./mobile.module.css";
import { NextPage } from "next";
import OpenInFullRoundedIcon from "@mui/icons-material/OpenInFullRounded";

const mobile: NextPage = () => {
  return <OpenInFullRoundedIcon className={styles.expandIcon} />
};

export default mobile;

以下是该类在开发时的加载方式：

下面是它在 prod 上被重写的方式：

更糟糕的是，我的项目中甚至没有定义覆盖我的类。我对 NextJs 有点陌生，所以我将不胜感激对此问题的任何见解。

我试图在使用css-modules和webpack构建系统的react应用程序中使用关键帧动画.

最简单的例子,重现问题:

.confirmRemove {
  animation: 150ms appear ease-in;
}
@keyframes appear { ... }

编译为:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms :local(appear) ease-in;
  animation: 150ms :local(appear) ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

应该是什么:

.comparators__confirmRemove__32JB0 {
  -webkit-animation: 150ms comparators__appear__KTI43 ease-in;
  animation: 150ms comparators__appear__KTI43 ease-in;
}

@keyframes comparators__appear__KTI43 { ... }

我做过的事情

1. 尝试了各种各样的洒水用途:当地的地方
2. 发现了一个未解决的问题539,但过去一周内没有任何行动或回应
3. 尝试版本28.1(最新),27.3和锯26也不起作用
4. 考虑放弃网站开发
5. 评论拉请求
6. 试图解决问题264的所有步骤

我需要的

一个已知版本的css-loader,适用于关键帧动画和css模块或解决方案,直到作者修复.

其他相关信息

节点版本7.9

当前相关的package.json:

"autoprefixer": "7.1.1",
    "css-loader": "0.28.1",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "node-sass": "4.5.3",
    "sass-loader": "6.0.5",
    "style-loader": "0.18.1",
    "url-loader": "0.5.8", …

我正在尝试在我的 reactjs 应用程序中使用 css 模块。我已经在webpack.config文件中添加了加载器。

 {
                test: /\.css$/,
                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

            },

但是，当我导入CSS文件中的我的应用程序，并尝试使用它classNames像{styles.example}那么它不会在我的CSS文件链接到。实例。

这就是我的做法：

import styles from './TestPage.css'

<div className={styles.example}></div>

这是行不通的。

组件没有样式。不过，我在控制台中没有收到任何错误。我该如何解决？

我无法使用 webpack 在我的 React 项目中通过 scss 文件导入背景图像。我遵循了最近关于 stackexchange 的所有建议，但没有效果。当我尝试通过 scss 或 css 文件导入图像时，收到此错误消息：

找不到模块：错误：无法解析“marker.svg”

在.scss文件中

.marker {
  background-image: url('./marker.svg');

webpack 中的 scss 配置

{
  test: /\.s[ac]ss$/,
  use: [{
    loader: 'style-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'css-loader',
    options: {
      localIdentName: '[hash:base64:5]',
      modules: true,
      sourceMap: IS_DEV
    }
  }, {
    loader: 'postcss-loader',
    options: { sourceMap: IS_DEV }
  }, {
    loader: 'sass-loader',
    options: {
      sourceMap: IS_DEV,
    }
  }]
},

webpack 中的图像配置

{
  test: /\.(svg|png|jpg)$/,
  use: {
    loader: 'url-loader',
    loader: 'svg-url-loader',
    loader: …

我正在建立一个React网站，以启用css模块样式我弹出使用的项目

npm run eject

我在webpack.config.dev.js和webpack.config.prod.js文件中添加了额外的配置，问题是我正在使用组件调用react-big-calendar（https://github.com/intljusticemission/ react-big-calendar），在该模块中，我必须导入一个css文件。问题是，当我启用模块功能时，它不会将css样式应用于日历，它过去看起来像：

现在看起来像这样：

为了应用大日历css文件中的类，我该怎么办？

谢谢！

我有一个简单的 scss 文件

.navItem {
  cursor: pointer;
    
  &.active {
    color: $primaryPurple;
  }
    
  &:hover {
    color: $primaryPurple;
  }
    
  span {
    margin-left: 10px;
  }
}

出于某种原因，:hover有效但.active不起作用。正如您在下图中所看到的，li显然有活动类，但我没有看到字体颜色 css 发生了变化。