标签: css-modules

我有一个文件使用scss与css模块,如下所示:

import styles from './Login.scss';

webpack构建工作正常但我得到一个流错误: Required Module Not Found

在我的.flowconfig中

[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*

[include]

[libs]

[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue

我也看过https://github.com/facebook/flow/issues/338但它确实没有任何解决方案.

有没有人找到解决这个问题的方法？

我将 CSS 模块与 webpack css-loader 一起使用，然后将它们与 mini-css-extract-plugin 捆绑在一起。这是我的配置的样子：

{
    test: /\.css$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: "css-loader",
        options: {
          modules: true,
          localIdentName: "[name]-[local]_[hash:base64:5]",
          imports: true,
          importLoaders: 1
        }
      },
      "postcss-loader"
    ]
  }

出于某种原因（请参阅评论部分），我真的很想将 postcss-loader 应用到不是每个单独的 .css 文件，而是应用到整个包。我怎样才能做到这一点？

我有 SFC（单文件 vue 组件），它使用 TypeScript、渲染函数和 CSS 模块

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  props: {
    mode: {
      type: String,
      default: 'td', // or th
    },
  },
  render(h) {
    return h('tr', [
      'preview',
      'name',
      'price',
      'count',
      'delete',
    ].map(col => h(this.mode, { class: this.$style[col] },
      this.$slots[col])));
  },
});
</script>

<style lang="stylus" module>
.preview
  display none

.delete
  text-align center

@media (min-width 768px)
  .preview
    display table-row
</style>

我从 TypeScript 收到错误：

ERROR in /home/oks/apps/shop/src/components/CartRow.vue
18:45 Property '$style' does not exist on type …

我需要配置next.config.js文件，以便同时使用两个不同的加载程序。这是第一个：

const withSass = require('@zeit/next-sass');

module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
})

这是第二个：

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass({
    webpack (config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        })
        return config
    }
}))

单独他们工作得很好！但是我无法将它们组合在一个规则中，以便两者可以一起工作。

谢谢你的帮助！！

在我的项目中，我使用带有 Less 的 CSS 模块，这意味着我可以两全其美。

我的src文件夹看起来像这样：

components/
    [all components]
theme/
    themes/
        lightTheme.less
        darkTheme.less
    palette.less

调色板.less：

components/
    [all components]
theme/
    themes/
        lightTheme.less
        darkTheme.less
    palette.less

然后，在每个想要使用主题颜色的组件中，我这样做：

组件.module.less :

@import './themes/lightTheme.less';

这种结构让我可以编辑palette.less以导入我想要使用的主题。问题是我想让用户自己选择他们喜欢的主题。主题应该可以在运行时切换，这意味着我需要以某种方式编译两个主题。

我想象完美的解决方案是这样的：

无应用程序

@import '../../theme/palette.less';

.element {
    background-color: @primary;
}

然后以某种方式@theme在每个组件中导入这个变量并从中读取属性（即@theme[primary]）。

不幸的是，Less 变量范围不是这样工作的。

我对任何使用 Less 模块的解决方案持开放态度。

谢谢！

有谁知道任何有助于突出显示未在 css-modules 中使用的类的工具？
最近我在我的项目中添加了 typescript-plugin-css-modules，它帮助我检测我是否在 JSX 中使用了不存在的类名，但现在我也希望能够检测到 module.css 中未使用的类，因为它不必要地添加了死css 代码到包中。

是否可以在一个 CSS 模块中使用另一个 CSS 模块中的类？

问题是CSS模块正在做它自己的类名翻译，所以.classfrom A.csswill变成A-module--class-something和.classfrom B.csswill变成B-module--class--somethingElse，它们将被视为单独的类。

A.CSS

.class {
  (...)
}

B.CSS

/* .class is the same class as in A.css */
.class > .someOtherClass {
}

我正在尝试使用 CSS 模块来实现 ReactJs 项目的 CSS 样式，为此我应用了 ant design 文档（请参见此处：https: //pro.ant.design/docs/style），但不幸的是它不起作用。问题是我想重写ant Button的组件样式，但它没有获取样式。下面是我的代码的简短示例：CSS 类：在 MyContainer.less 文件中：

 .antButton{
    :global {
        .ant-btn-primary {
            background-color: rgb(215, 226, 233);
            border-color: #848586;
            font-size: 7pt;
            color: red !important;
         }
    }
 }

代码：

import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.less';
import styles  from './MyContainer.less';

const MyContainer= () => {
        return (
          <Button type="primary" size="small" className={styles.antButton}  >Download</Button>
    );
 };
export default MyContainer;

我在react（版本16.13.1）中使用Ant design（版本4.3.0）和Webpack（版本4.42.0）。我还安装了less-loader（版本7.3.0）和babel-plugin-import（版本1.13） .3).

我不知道我是否缺少 Webpack 的任何特定配置，或者问题出在其他地方？

我正在尝试找出如何在 Next.js 中将 Tailwind 与 CSS Modules 一起使用的良好工作流程，但我遇到了一些关于 Webpack 插入样式的特异性和顺序的棘手问题。

考虑以下用例：我想创建一个可重用的 Button 组件，其样式可以被实用程序类覆盖。选项 1是提取组件，如Tailwind Docs 中所述：

/* button.jsx */

export const Button = props => <button {...props} className={`btn {props.className}`} />

在我的tailwind.css文件中，我将在@layer指令中添加类名：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn { @apply ... }
}

这很好，因为我可以使用实用程序类覆盖任何按钮样式，因为它们具有更高的特异性。但是，我在这里看到了一些小问题：

• 该类现在是全局的，因此即使我不使用该组件，它也会包含在每个页面中
• 样式和组件不再位于同一位置 - 如果我创建许多这样的类，这可能会变得混乱

选项 2是使用 CSS 模块并应用如下类：

/* button.module.css */

.btn { @apply ...}

/* button.jsx */

import styles from "./button.module.css";

export const …

我希望能够styles.scrollValue使用document.querySelector()

import { useEffect } from "react";
import styles from "./Navbar.module.scss";

const Navbar = () => {
  const handleScroll = () => {
    document.querySelector(styles.scrollValue).innerHTML = scrollY;
  };
  useEffect(() => {
    document.addEventListener("scroll", handleScroll);
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  });
  return (
    <nav className={styles.navbar}>
      <div className={styles.content}>
        <h1 className={styles.scrollValue}>0</h1>
      </div>
    </nav>
  );
};

运行此代码我收到错误：

类型错误：document.querySelector(...) 为 null

我知道我可以向该元素添加一个全局类，执行以下操作：

className={`${styles.scrollValue} scrollValue`}

但这会破坏使用 CSS 模块的优势。

有没有一种方法可以选择 CSS 模块类而不添加另一个类？