标签: css-modules

假设在我的global.cssNext.js 项目文件中我有：

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

我还有一个Layout.js组件和一个Layout.module.css文件。该组件如下所示：

import styles from "../styles/Layout.module.css";
const Layout = ({ children }) => {
  return (
    <div>
      <div className={styles.navbar}>
        <div className="flex">
        <h1>Structured Safety</h1>
        <nav>
            <ul>
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">Demo</a> </li>
            </ul>
        </nav>
        </div>
      </div>
    </div>
  );
};

export default Layout;

是Layout.module.css：

/* Navbar */
.navbar {
  background-color: var(--primary-color);
  color: #fff;
  height: 70px;
}

.navbar ul {
  display: …

我的 css 模块无法与 Storybook 一起使用。没有任何错误，只是不起作用。我不明白\xc2\xb4t 出了什么问题。这是 Storybook 如何渲染按钮的图像：

Button.js文件：

import React from "react";\nimport PropTypes from "prop-types";\nimport style from "./styles.module.css";\n\nconst Button = ({ type, children }) => (\n  <button className={style.button}>{children}</button> \n);\n\nButton.propTypes = {\n  children: PropTypes.node.isRequired,\n  type: PropTypes.string,\n};\n\nButton.defaultProps = {\n  children: "primary",\n  type: "primary",\n};\n\nexport default Button;\n

Button.stories.js文件：

import React from "react";\nimport Button from "./Button";\n\nexport default {\n  component: Button,\n  title: "Test/Button",\n};\n\nconst Template = (args) => <Button {...args} />;\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n  children: "xx …

我正在将我的项目从 create-react-app 迁移到 Vite。

我的风格中有以下片段：

// Button.module.scss\n.btn {\n  border-radius: 8px;\n  border-style: solid;\n  padding: 8px;\n  cursor: pointer;\n\n  --btn-bg-color: #efefef;\n\n  &:not(:disabled) {\n    cursor: pointer;\n    background-color: var(--btn-bg-color);\n\n    &:hover {\n      --btn-bg-color: gray;\n      border-color: white;\n    }\n  }\n}\n

在其他模块中：

.label {\n  composes: btn from \'src/Button.module.scss\'\n}\n

这曾经用 webpack 构建得很好。

有了 Vite，在 css 包中我得到了这个：

._btn_x66zc_1 {\n  border-radius: 8px;\n  border-style: solid;\n  padding: 8px;\n  cursor: pointer;\n  --btn-bg-color: #efefef;\n\n&\n:not(:disabled) {\n  cursor: pointer;\n  background-color: var(--btn-bg-color);\n\n&\n:hover {\n  --btn-bg-color: gray;\n  border-color: #fff\n}\n\n}\n}\n

以及 CLI 警告：

我正在使用 css 模块，但是我在组件中使用一个库来使用 JavaScript 附加推文，它以以下结构向我的组件添加了一些元素：

<div class='user'></div>
<div class='tweet'></div>

我现在想在组件的 css 模块中设置这些元素的样式，如下所示：

我的组件.css

.user {
 /* styles */
}

.tweet {
 /* styles */
}

但是，当然现在我的.user类更改为.MyComponent__user___HZWfM由于 webpack 加载器中的哈希命名。

如何在我的 css 模块中设置全局样式？

我正在尝试编写一个加载程序，将衍生文件添加到 webpack 文件系统缓存中。

在高层次上，我有一个 CSS 加载器，它应该为 CSS 类生成 TypeScript 类型定义文件。这个加载器位于加载器顺序的中间，因为我正在为 CSS 模块生成这些文件。

我可以使用 编写这些文件fs，但是直到下次运行 webpack 时，TypeScript 加载器才会看到这些文件。这使得 TS 第一次抛出错误。

如何让加载器修改 webpack 的文件系统缓存？

我在webpack中设置了一些别名,如下所示:

  resolve: {
    alias: {
      data: path.resolve(__dirname, 'data'),
      withStyles: 'isomorphic-style-loader/lib/withStyles',
      modules: path.resolve(__dirname, 'src', 'modules'),
      components: path.resolve(__dirname, 'src', 'components'),
    },

@imports在文件顶部的sass文件中执行时,它们工作正常:

@import '~components/common/css/mixins';

.root {
  @include scale-size(padding-top, 24px, 42px);

...

但是,当加载"compes"时,它说它找不到模块:

.bottom-cta {
  composes: cta from '~components/common/css/button';
...

但是,如果使用"普通"路径(../../components/common/css/button)它可以工作.

这是预期的行为吗？我怎么解决这个问题？

提前致谢.

我有一个组件:

import React from 'react';
import * as styles from './RedComponent.css';

class RedComponent extends React.Component {
  render () {
    return <div className={ styles.red }></div>;
  }
}

这是测试用例:

describe('Test suite', () => {
  test('RedComponent tests', () => {
    const wrapper = shallow(<RedComponent />);
});

console.log(wrapper.debug()); 给

<div className={[undefined]}></div> 

代替

<div className="RedComponent__red"></div>

如果我控制我得到的导入样式

console.log(styles); // {default: {}}

这只是在Jest测试用例中.当应用程序在浏览器中呈现时,样式未定义.

我的开玩笑配置:

{
  "moduleFileExtensions": [
    "js"
  ],
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleNameMapper": {
    "\\.(css|less)$": "identity-obj-proxy"
  },
  "setupFiles": [
    "./test-setup.js"
  ],
  "collectCoverageFrom": [
    "src/**/*.{js}",
    "!**/node_modules/**"
  ], …

这个问题尚未解决，我在这里需要帮助。救命！

我的问题是：如何使用css-loader设置webpack sass-loader，设置成CSS模块，以防止重复导入？

谁能指出我如何开始解决这个问题？

我有一个react组件,它有一个X选项,可以导入要使用CSS模块的样式表.

理想情况下,我希望通过使用eg获取一个全局环境变量

process.env.THEME

我不能用:

import MyStyleSheet from `${process.env.THEME}/my.module.css`

我可以用:

const MyStyleSheet = require(process.env.THEME/my.module.css);

然而.....

import/no-dynamic-requireeslint规则开始说它的坏. https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md

我读过的所有文章和帖子都说不可能.当然这是一个普通的想法,但我不能为我的生活找到如何做到这一点.有任何想法吗？

更新:

import React from 'react';

const Classes = import('./${process.env.theme}/Button.module.css');

const Button = () => (
  <button className={Classes.button}>My Themed Button</button>
);

export default Button;

我正在组件库项目上使用带有汇总功能的CSS模块（Sass），效果很好。每个组件都以一个dist文件夹结尾，该文件夹包含一个JS捆绑文件，以及一个带有范围CSS类的对应CSS文件，因此该组件的使用者不必担心CSS类名冲突。他们所做的只是包括JS包和CSS文件，一切都很棒。Yay CSS模块。

我现在面临的问题是某些组件确实需要单独的“主题”-理想情况下，需要单独的CSS文件，每个主题一个。因此，消费者可以继续做下去：包括JS包，但现在选择要包括哪个CSS文件来选择主题。

我不确定如何通过CSS模块和汇总来解决这个问题，也不确定其他人是否正在采用这种方法。据我所知，汇总始终将捆绑在一起处理，而我想要单独的 CSS文件，所有这些文件在构建阶段都将其类重命名为相同的名称。这样，如果在我的JS中引用的是styles.myclass，如果myclass已scoped-myclass被CSS模块重命名为原始CSS文件，那么对于第二个CSS文件，它也将具有相同的名称。

这将使组件的使用变得极其简单-只需包含一个不同的CSS文件即可。

有什么建议么？