标签: css-modules

我的应用程序和组件的名称间距遵循以下约定：

<div id="app-name">

  <ul class="list">
    <li>item</li>
  </ul>

</div>

#app-name {

  .list {
    margin: 0;
  }

}

我想使用 CSS 模块，但是，我不确定如何对其进行转换并保持应用程序和组件名称间距的相同特异性。我知道我可以简单地省略整个#app-nameID，但我想要这种特殊性。

想法？

我有一个通过插件使用 CSS 模块的组件babel-plugin-react-css-modules。

在组件生命周期的某些时刻，我希望能够通过直接访问 DOM 来计算它的新维度。

在我的 SCSS 样式表中，我有一个名为的类.full-width，我想将其应用于组件的 DOM 元素，以便进行计算，然后再次将其删除。

现在，由于添加类并稍后删除它不会影响组件或其状态，因此我想通过直接访问 DOM 来添加和删除类，而不是通过某种方式将其与组件的相关联。state。

如果我这样做，则会将this.DOMReference.classList.add('full-width');类full-width添加到其中，但我想添加该类的模块化版本，因为如果我这样做了，它将被应用styleName="full-width"（例如Component__full-width___Pjd10）

.full-width有没有办法在不进行全局声明的情况下做到这一点？

我可以用 来做到这一点吗react-css-modules？

我正在使用 Jest 和 Enzyme 来测试我的应用程序。我收到错误：

 FAIL  app/containers/Navbar/NavbarContainer.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    app/components/Navbar/styles.css: Unexpected token (1:0)\n      > 1 | @import "../../styles/base/_variables";\n          | ^\n        2 |\n        3 | .navbar{\n        4 |   width: $navbar-width;\n

这是我在 package.json 中的 Jest 配置：

"jest": {\n    "verbose": true,\n    "globals": {\n      "env": {\n        "isProd": false,\n        "isDev": true,\n        "command": "start"\n      }\n    },\n    "moduleNameMapper": {\n      "\\\\.(css)$": "identity-obj-proxy"\n    },\n    "moduleFileExtensions": [\n      "js",\n      "jsx",\n      "json",\n      "css"\n    ],\n    "modulePaths": [\n      "/app"\n    ],\n    "moduleDirectories": [\n      "node_modules"\n    ],\n    "verbose": true,\n    "setupFiles": …

想象一个更传统的 Web 应用程序，它正在一个复杂到足以需要它的页面中慢慢引入 React 组件。

我们正在使用 Webpack 开发这个新的 UI，并且我们使用 css 模块来实现新 UI 所需的所有新 css。但我们仍然需要重用一些全局的 css，并通过 html 中链接的传统 css 样式表在应用程序中提供。

因此，我们需要在 css 模块中偶尔编写引用全局命名空间中的 css 类的规则，而不是本地范围内的类，因此在应用程序运行时转换为更像 gem 的长 css 类名：

.container {
  // rules for container
}
.container.pull-right {
  // rules for when the container element also has the pull-right class
}

在上面的示例中，container它是一个 css 类，css 模块将使用该模块将其上下文化到特定组件。

但是pull-right是存在于页面中可用的 css 文件中的类，但不被 css 模块或 Webpack 处理。因此，我们需要一种方法（可能是语法）来告诉 css 模块“嘿，保持pull-right输出中的原样。不要弄乱它或尝试将其删除”。

我想这样的东西应该存在，但到目前为止我还没有通过谷歌搜索找到它。

我想在我的反应应用程序中实现主题。因此我使用了这个教程（sass-mixins）。

但这不能与 css-modules 结合使用，因为主题类位于我想要主题化的 css-module 之外。

有没有人有解决此问题的方法或使用 sass 主题化反应应用程序的另一种方法？

应用程序.js

const theme = require('../../Theming.sass)

<div class={theme['theme-dark'}>
  <SearchBar/>
  ...
</div>

搜索栏.js

const styles = require('./SearchBar.scss)
const theme = require('../../Theming.sass)

<div class={styles.searchBar}>
  ...
</div>

搜索栏.scss

.searchBar {
  @include themify($themes) {
    color: themed('primary');
    background: themed('secondary');
  }

  height: 3em;
  overflow: hidden;

SearchBar.css（已编译）

.searchBar {
  height: 3em;
  overflow: hidden;
}

.theme-light .searchBar {
  color: #fff;
  background: #bfbfbf;
}

.theme-dark .searchBar {
  color: #000;
  background: #1a1a1a;
}

主题化.sass

.theme-dark { background: #000; }

.theme-light …

我尝试设置我的笑话运行器以与 scss@impport语句（在我的 React 应用程序的 css 模块内）正常工作。但不幸的是，每次运行测试脚本时都会出现错误。我尝试了 StackOverflow 类似票证中的不同解决方案，但它对我没有帮助。

我的错误示​​例：

我的笑话.config.js：

module.exports = {
transform: {
    "^.+\\.(jsx?|tsx?)$": "<rootDir>/.jest/transform.ts",
},
testURL: 'http://localhost:6006/',
testRegex: "((\\.|/)(test|spec))\\.(jsx?|tsx?)$",
preset: 'jest-puppeteer',
moduleFileExtensions: [
    "scss",
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
],
moduleDirectories: ["node_modules", "src"],
moduleNameMapper: {
    '\\.(jpg | ico | jpeg | png | gif | eot | otf | webp | svg | ttf | woff | woff2 | mp4 | webm | wav | mp3 | m4a | aac | oga)$ ': '<rootDir>/__mocks__/fileMock.js', …

在我的反应项目中，如果我使用 css 模块文件中一些不存在的 className，

 // mycss.modules.scss

.thing { color: red }

// index.jsx

import styles from mycss.modules.scss

<div className={styles.otherThing}>Some div</div>

// Browser would return:

<div>Some div</div>

它悄悄地失败了，没有让我知道这个类不存在。我如何检查这个类名是否存在并抛出错误。如果在构建期间保存文件时收到错误，那就太好了。

当我想从样式化组件迁移到 CSS 模块时，出现了以下问题。

假设我有以下样式组件，它接受动态参数offset和动态 CSS 字符串theme：

const Li = styled.li`
  &.selected {
    background-color: grey;
  }

  margin-left: ${({ offset }) => offset}px;

  ${({ theme }) => theme};
`;

在我的代码中，我会按以下方式使用它：

const Parent = () => (
  <List>
    {list.map((item) => (
      <Item
        key={item.id}
        id={item.id}
        selectedIds={[]}
        offset={24}
        theme={`
          &.selected {
            background-color: green;
          }
        `}
      >
        {item.name}
      </Item>
    ))}
  </List>
);

const Item = ({ id, offset = 0, theme, children }) => {
  return (
    <Li
      theme={theme}
      offset={offset}
      className={selectedIds.includes(id) && …

我有一个基于入门项目的 Gatsby and Sanity 站点。到目前为止，一切都运行良好，但我今天在 package.json 文件中更新了所有包和插件，以消除所有 npm 警告。这包括更新到 Gatsby 3.0.3 和 PostCss 8（我现在也在使用 gatsby-plugin-postcss 4.0.0）。

我设法解决了一些初始错误，但现在我遇到了一个问题，它无法识别我的 CSS 模块。我收到每个组件文件的错误：

尝试导入错误：“[componentName].module.css”不包含默认导出（作为“样式”导入）

当我在反应组件中导入 css 文件时

import styles from './[componentName].module.css'

样式对象返回未定义。我是否需要降级到其中一些软件包的旧版本？

这是我的 package.json：

  "dependencies": {
    "@cloudflare/wrangler": "^1.15.0",
    "@fontsource/montserrat": "^4.2.2",
    "@fontsource/raleway": "^4.2.2",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/client": "^2.2.6",
    "@sanity/image-url": "^0.140.22",
    "date-fns": "^2.19.0",
    "dotenv": "^8.2.0",
    "gatsby": "^3.0.3",
    "gatsby-plugin-anchor-links": "^1.2.1",
    "gatsby-plugin-manifest": "^3.0.0",
    "gatsby-plugin-react-helmet": "^4.0.0",
    "gatsby-source-sanity": "^6.0.5",
    "get-youtube-id": "^1.0.1",
    "postcss-import": "^14.0.0",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.1",
    "react-autosize-textarea": "^7.1.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^6.15.4",
    "react-icons": "^4.2.0",
    "react-script": "^2.0.5",
    "react-youtube": "^7.13.1" …

我将 React 与 TypeScript 结合使用，每个组件都有一个单独的 CSS 文件。我按如下方式导入 CSS 文件：

import styles from 'pages/login/Login.module.css'

分配一个 className 看起来像这样：

<input className={styles.username} ref={nameRef} type="text"  placeholder="USERNAME"/>

是否可以选择使用伪类？

<input className={styles.username:active} ref={nameRef} type="text"  placeholder="USERNAME"/>

这种方法显然行不通，它只是为了让我更清楚我想要实现的目标。