标签: css-modules

在我们的自动化测试中，代码中的典型行可能类似于：

find('.edit-icon').click

我们正在我们的项目中使用 css-modules，我被警告说类名可能会发生巨大的变化。一个非常滑稽的例子是这个网站在其类名称中使用表情符号（当您检查页面时）：

css 模块由 Glenn Maddern 设计

我怎样才能最好地为如此巨大的变化做好准备？我想象我们的许多规范都被破坏了，但我有点担心在我们的项目中根本无法使用这项新技术编写测试。

这是我的文件的相关部分webpack.config.js：

module: {
    loaders: [
        {
            test: /\.css$/,
            exclude: /node_modules/,
            loaders: [
                "style-loader?sourceMap",
                "css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]"
            ]
        },
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }
    ]
}

当我编写自己的 css 并将其与我的React组件一起使用时，这非常有用。但是，我最近尝试使用React Datepicker，它带有自己的 css 文件，可以导入到使用 React Datepicker 的组件中。

如何修改我的webpack.config.js文件，以便我导入的 React Datepicker css 文件不会被具有本地类名的 CSS 模块转换？换句话说，是否可以配置 webpack，以便将第 3 方样式导入到全局范围，并将我自己的样式导入到本地范围？

另外，如果我想编写自己的自定义样式来覆盖 React Datepicker 样式，我该如何做才能使这些样式也在全局范围内？

我有以下 webpack 配置：

test: /.css$/,
use: extractAppStyles.extract({
    fallback: 'style-loader',
    use: [{
        loader: 'css-loader',
        query: {
            modules: true,
            importLoaders: 1,
            sourceMaps: false
        }
    }, {
        loader: 'postcss-loader'
    }]
})

和postcss.config.js：

module.exports = {
    plugins: [
        require('precss'),
        require("postcss-extend")
    ]
};

我想在本地 css 模块中使用 postcss-extend 插件，以便我可以在本地模块中扩展一些全局定义的选择器，例如：

.test {
   @extend :global(.some-class);
}

哪里.test是本地的，.some-class是全球的。使用当前设置，只能扩展本地定义的选择器，而全局变量似乎未定义：

':global(.some-class)', 还没有定义，所以不能扩展

加载程序的顺序似乎是问题所在，我认为模块在由postcss-extend插件处理时没有得到解决。我postcss-modules之前尝试使用插件，postcss-extend但没有按预期工作。

有没有人想出如何结合使用两者，以便可以在本地扩展全局定义的选择器？

在遵循有关如何执行此操作的文档后，我已将我的笑话设置为允许静态文件，但我仍然收到以下错误。

我怎样才能通过并创建快照。

终端错误

FAIL  src/components/Splash/Splash.test.js
  ? Test suite failed to run

    /var/www/com/src/components/shared/logo/_Logo.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.logo {
                                                                                             ^

    SyntaxError: Unexpected token .

      3 | 
      4 | 
    > 5 | import logo from './_Logo.css';
      6 | import * as font from '../font/fontello.css';

飞溅.test.js

import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import Splash from './Splash';

it('Splash page is rendered', () => {
    const result = shallow(
        <Splash />,
    );

    expect(shallowToJson(result)).toMatchSnapshot();
});

玩笑配置

  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ], …

不是真正的问题，而是我不满意的事情。我正在使用react+ typescript+ css modules+ https://material-ui-next.com/。问题是，当我需要为材质 ui 组件设置样式时，我必须使用!important很多。问题是是否有一种方法可以在没有important. 我创建了一个示例项目来重现问题https://github.com/halkar/test-css-modules

有人做了一个很好的例子，根据是否使用 JS 模块删除未使用的 CSS，但我试图弄清楚如何从组件中删除未使用的 CSS 类，这些类实际上并未被组件使用。

例子

// Sub.scss
.sub-container {
  background-color: green;
}

.unused-junk {
  color: blue;
}


// Sub.js
import React from "react";

import styles from "./Sub.scss";

export default function Sub() {
  return <div className={styles.subContainer}>Hi from sub.</div>;
}


// App.scss
.app-container {
  background-color: red;
}


// App.js
import React from "react";
import ReactDOM from "react-dom";

import Sub from "./Sub";
import styles from "./App.scss";

function App() {
  return (
    <div className={styles.appContainer}>
      Hi from app.
      <Sub />
    </div> …

我正在尝试使用 React、关键帧、CSS 模块（和 SASS）来制作一个简单的动画。问题在于 CSS 模块散列关键帧名称的方式与散列本地类的方式相同。

JS代码

//...

export default () => {
  const [active, setActive] = useState(false);
  return(
    <div className={active ? 'active' : 'inactive'}
      onClick={() => setActive(!active)}
    >content</div>
  )
}

尝试使所有内容都全局化，将此源用作教程（不编译）：

//default scope is local

@keyframes :global(animateIn) {
  0% { background: black; }
  100% { background: orange; }
}

@keyframes :global(animatOut) {
  0% { background: orange; }
  100% { background: black; }
}

:global {
  .active {
    background: orange;

    animation-name: animateIn;
    animation-duration: 1s;
  }

  .inactive {
    background: …

这是我的代码（只是一个非常基本的设置）。所有文件都在同一个文件夹中。
我正在使用create-react-app.

用户.tsx：

import React from "react";
import styles from "./User.module.scss";

const User: React.FC = () => {
  return <div className={styles.user}>User</div>;
};

export default User;

用户.module.scss：

@import "scss/abstracts";

.user {
  color: $dark_theme_color;
}

用户.test.tsx：

import React from "react";
import { render, getByText } from "@testing-library/react";
import User from "./User";

it("renders correctly", () => {
  const { asFragment } = render(<User />);
  const fragmentElement = asFragment().firstChild as HTMLElement;
  const root = getByText(fragmentElement, "User");

  expect(root).not.toBe(null);
  expect(root).toMatchSnapshot();
});

运行时出现jest此错误： …

I Was beginning with Gatsby, and in my app, when I run the command 'gatsby develop', I got this warning in terminal:

warn Attempted import error: '../styles/home.module.css' does not contain a default export (imported as 'styles').

And then, when I´m trying to load a page, It´s not possible

Unhandled Runtime Error 
Cannot read property 'header' of undefined 
<section className={styles.header}>

This is part of my code (file index.js):

import styles from '../styles/home.module.css'

export default function Home({ data }) {
  return ( …

我有一个看起来像这样的倒计时组件

import styles from "./Countdown.module.scss";
import React from "react";
import useTimer from "hooks/useTimer";
import cn from "classnames";

function Countdown({ date,className="" }) {
  const { days, hours, minutes, seconds } = useTimer(date);
  return (
    <div className={cn(styles.countdown,className)}>
      <div className={styles.box}>
        <p className={styles.number}>{days}</p>
        <p className={styles.type}>Days</p>
      </div>
      <div className={styles.seperator}>:</div>
      <div className={styles.box}>
        <p className={styles.number}>{hours}</p>
        <p className={styles.type}>Hours</p>
      </div>
      <div className={styles.seperator}>:</div>
      <div className={styles.box}>
        <p className={styles.number}>{minutes}</p>
        <p className={styles.type}>Minutes</p>
      </div>
    </div>
  );
}

export default Countdown;

我有看起来像这样的主页

import styles from "../styles/Home.module.scss";
import Countdown from "components/ui/Countdown";
export default function Home() { …