标签: css-modules

我正在尝试让 typescript 和 sass 模块在 Gatsby 项目中协同工作。

我正在使用gatsby-plugin-ts-loader和gatsby-plugin-sass插件。

索引.tsx

import * as React from 'react';
import styles from './index.module.scss'; // TS2307: Cannot find module './index.module.scss'.

export default () => <div  className={styles.root}>
    <h1>Hello Gatsby!</h1>
</div>;

索引.模块.scss

.root {
  h1 {
    color: red;
  }
}

我收到以下错误TS2307: Cannot find module './index.module.scss'.。如果我把它放在@ts-ignorescss 导入行之前，我会得到TypeError: index_module_scss_1.default is undefined.

我正在开发一个 Next.js 项目，其中菜单通过<p>切换菜单类打开。我设法做到了这一点，但是当我在 CSS 中添加该类时，它没有考虑这两个类。

这是我的代码：

成分

import { useState } from "react";
import styles from "../styles/modules/header.module.scss";

export default function Component() {
    const [isModal, setIsModal] = useState(false);
    return (
        <div>
            <p onClick={() => setIsModal(!isModal)}>Menu</p>

            <div className={`${isModal && "nav-open"} ${styles.ModalContainer}`}>
                Content
            </div>
        </div>
    );
}

社会保障体系

.ModalContainer {
    position: absolute;
    left: -100vw;

    &.nav-open {
        left: 0;
    }
}

当我检查代码时，我可以看到当我单击菜单按钮时它添加了类，但看不到预期的更改。有人有解决办法吗？

我正在尝试在 nextjs 中将类名中的变量与 css 模块一起使用，但我很难找出正确的语法。

我的变量来自api：

const type = red

我正在尝试如何做到这一点：

<div className={` ${styles.background} ${styles.--type}`}></div>

我期望的结果：

<div className={` ${styles.background} ${styles.--red}`></div>

有办法做到吗？

我正在使用 css 模块，并且有一个包含两个类的 React 组件：

• 一 - 使用 css 模块进行哈希处理
• 另一个 - 未散列，因为它来自另一个函数（假设它是“clear-class”）。

<div className={`${styles.hashedClass} clear-class`}>
   qwerty
</div>

我的 scss 文件看起来像这样，但它不起作用。

.hashedClass {
  ...

  &.clear-class {
    background-color: green;
  }
}

当我使用开发工具查看源代码时，我注意到clear-class也被散列了。

有没有办法在 scss 文件中标记我想要将样式应用于非散列类？

我是 CSS 模块和 React 的新手。

import React, { useState } from "react"
import styles from "./Counter.module.css"

function Counter() {
    const [count, setCount] = useState(0)

    const increase = () => {
        setCount(count + 1)
    }

    const decrease = () => {
        setCount(count - 1)
    }
    return (
        <div>
            <h2>This is a counter</h2>
            <p>Current number: {count}</p>
            <button className={styles.button__increase} onClick={increase}>+++</button>
            <button className={styles.button__decrease} onClick={decrease}>---</button>
        </div>
    )
}

export default Counter

我添加了类 {styles.button__decrease}。使用 CSS 模块时，如何向此 className 添加另一个类？我的 CSS 文件中有“.button”和“.button--decrease”类，但我不知道如何应用多个类。

先感谢您！

以前的节点版本是7.9.0.该项目运行良好.当我将其升级到8.9.4时,我收到以下错误.

ERROR in ./node_modules/css-loader?{"sourceMap":false,"import":false}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/sass/styles.scss
Module build failed: Error: Missing binding F:\LogicSoft-SRL\angular-frontdesk\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x

Found bindings for the following environments:
  - Windows 64-bit with Node.js 7.x

如何在当前版本(8.9.4)中修复此错误？

默认情况下，我使用CSS 模块在本地范围内我的所有样式。根据我的理解，我能够使用在本地样式表 ( ./movieCard.styl) 中设置的类名的唯一方法是使用属性styleName="something". 因此className="something"，将无法访问./movieCard.styl. 我想我可以style={}在 HTML 元素上使用该方法，但我希望我的组件干净，没有样式标记 - 所以我希望有另一种方法可以使用 CSS Module 语法的行为方式来做到这一点。

我尝试了以下方法（即使这些方法没有给出任何错误，它们也不起作用）：
styleName={isHovered ? ' movie-card--show' : ''}
className={isHovered ? ' movie-card--show' : ''}

上下文：我试图根据用户是否悬停在电影海报上来显示电影信息。我需要对move-card__info元素应用某种样式，以使海报悬停时文本可见。

下面是我试图完成的一个例子。

import React, { Component } from 'react';
import CSSModule from 'react-css-modules';
import styles from './movieCard.styl';

class MovieCard extends Component {
  state = {
    movie: this.props.movie,
    isHovered: false,
  };

  cardHoverToggle = () => {
    const { isHovered } = …

反应和所有这些东西都很新，所以我需要一些帮助。我最近在我的项目中添加了https://github.com/gajus/babel-plugin-react-css-modules插件。经过一些麻烦，我让它工作了，所以我现在可以在我的组件中使用我的本地 css 文件。到现在为止还挺好。

不是我想为整个应用程序添加引导程序。在我添加 css-modules 插件之前它工作了......

这是我的代码的相关部分（我猜......如果我错过了什么让我知道）：

index.js（我的应用程序的入口点）：

import 'bootstrap/dist/css/bootstrap.min.css';
...

.babelrc：

{
    "presets": [
        "react"
    ],
    "plugins": [
      ["react-css-modules", {
        "exclude": "node_modules"
      }]
    ]
}

webpack.config.js :

/* webpack.config.js */

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'eval',

  entry: [
    path.resolve('src/index.js'),
  ],

  output: {
    path: path.resolve('build'),
    filename: 'static/js/bundle.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve('src'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader', …

我正在使用支持 Webpack 的 CSS 模块（通过 css-loader）构建一个小型 Web 应用程序，但不使用React。我的目标是通过使用 css-loader 上的选项，在 HTML 中获得简短、模糊的 CSS 类名（因为我目前使用冗长的 BEM 类名）的好处localIdentName: '[hash:base64:8]'。由于我没有使用 React，所以我正在使用原始 HTML，该 HTML 不是通过JSX 文件或document.write.

我之前在 React 中使用过很多次 css-loader ，它最终是有效的，因为你可以在 React 文件中导入样式类名，并使用人类可读的名称来引用它们，无论类名发生什么变化通过Webpack。

但是，我很困惑在使用原始 HTML 时如何处理这个问题；我不能只导入样式，因为它不是 JS 文件。如果我的 HTML 中有一个名为引用的类photo__caption--large，并且 webpack 将类名转换为d87sj，则 CSS 文件会显示为d87sj，但 HTML 仍会显示为photo__caption--large。

是否有某种 HTML 文件加载器能够将文件中的类名编辑为其 Webpackified 等效项？或者我真的应该只使用 React 和 CSS 模块吗？

当我单击一个按钮时，我试图在 out 容器中实现或添加多个类。但似乎没有应用样式。下面是我的代码

布局.module.css

.Content {
    padding-left: 240px;
    min-height: calc(100vh);
    top: 0;
    display: block;
    position: relative;
    padding-top: 80px;
    background: #eee;
    padding-bottom: 60px;
    transition: padding-left 0.2s linear;
}

.Content.collapse {
    padding-left: 100px;
    display: block;
    transition: padding-left 0.2s linear ;
}

现在我像这样在我的导航组件中添加了折叠类

const layout = (props) => (
    <Aux>        
        <Sidebar collapse={props.collapse} />        
        <div className={`${classes.Content} ${props.collapse ? 'collapse' : ''}`}>
            <TopNavigation toggle={props.toggle}/>
            {props.children}
            <Footer />
        </div>
    </Aux>  
);

所以基本上我只是检查道具是否坍塌。如果是，那么我会collapse在课堂上添加一段文字。现在，当我单击一个按钮时，它会设置 state.collapse = true/false。它能够完成它的工作。现在它似乎没有读取我的 css 样式。下面是我的 DOM 中生成的类

请注意.Content检测到类样式。但正如你在这里看到的

Layout_Content__2WLOk collapse …