标签: css-modules

我在React应用程序中使用CSS模块.我还有一个带有一些全局样式的下拉组件(我很高兴,因为我想重复使用的一般样式).

当下拉列表处于活动状态时,将应用CSS类(.dropdown--active).有没有办法可以将全局类与我的组件的本地范围样式一起包含在内？也就是说,我想要的是:

.myClass {
  color: red;
}

:global .dropdown--active .myClass {
  color: blue;
}

但是,该语法使整个选择器全局化,这不是我所追求的:我希望.myClass将范围限定为组件.

我是用我的代码将我的JavaScript文件与React Router和Webpack 2分开:

export default {
  path: '/',
  component: Container,
  indexRoute: {
    getComponent(location, cb) {
      if (isAuthenticated()) {
        redirect();
      } else {
        System.import('../landing-page/LandingPage')
          .then(loadRoute(cb))
          .catch(errorLoading);
       }
    },
  },
  childRoutes: [
    {
      path: 'login',
      getComponent(location, cb) {
        System.import('../login/Login')
          .then(loadRoute(cb))
          .catch(errorLoading);
      },
    },
    { /* etc */ 
    }
};

这个捆绑包的结果如下:

public/
  vendor.bundle.js
  bundle.js
  0.bundle.js
  1.bundle.js
  2.bundle.js

这意味着最终用户只能获得他/她所需的JavaScript,根据他/她所处的路线.

问题是:对于css部分,我找不到任何资源来做同样的事情,即根据用户的需要拆分CSS.

有没有办法用Webpack 2和React Router做到这一点？

我正在尝试在我的项目中使用 Storybook v5.0，并且我正在使用 React + Webpack4 + CSS 模块。（我没有使用 CreateReactApp）

我的设置非常简单，并且我能够在没有 CSS 模块的情况下很好地设置 Storybook。

但是，如果我尝试编辑自定义故事书 webpack 配置以支持 CSS 模块，则会出错。

当我运行时，npm run storybook我得到的错误是：

ERROR in ./src/components/Test/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src!./src/components/Test/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--9-1!../../../node_modules/postcss-loader/src/index.js!./index.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

在我的package.json：

"@storybook/addon-actions": "^5.0.0",
"@storybook/addons": "^5.0.0",
"@storybook/react": "^5.0.0",

我.storybook/webpack.config.js遵循他们网站上的示例，如下所示：

const path = require("path");

const stylesLoaders = …

我想使用 vue 创建一个组件，该组件具有使用vuejs slot api 的Card标题和内容部分。

我无法理解如何在 Card 组件中创建结构。该卡应包含所有线框样式（填充和边距），但可以从使用该组件的子模板中进行扩展。

我想知道是否有任何标准方法可以对子组件中带有插槽的包装元素进行样式化。

基本Card元素有 2 个插槽，其中包含结构元素，我希望子模板可以在必要时进行修改。

<div class="Card">
  <header class="CardHeader">
    <slot name="header"></slot>
  </header>
  <div class="CardContent">
    <slot></slot>
  </div>
</div>

理想情况下，我想向元素添加一个:class属性#slot，并在插槽中的元素上使用该属性，但是，似乎旧语法在最新版本的框架中已被弃用，例如。

<Card>
  <template #header class="extendHeader">
    stuff
  </template>
</Card>

我可以想到 3 种行之有效的方法，每种方法都有其缺点。

1. 使用 props 通过根元素添加类
2. 在根元素上使用类并在组件元素上使用样式挂钩
3. 将插槽内容包装在另一个元素中

我的项目必须使用 css-modules 来尽可能减少全局 css，因为它在过去给我带来了很多悲伤。

1.使用props通过根元素添加类

此方法允许我使用 css-modules 并使Card元素开放以供扩展

组件模板需要从子模板中组合额外的样式

<header :class="$style.Header, ...headerClasses]">
  <slot name="header"></slot>
</header>

然后，子模板可以用来:header-classes扩展基本 Card 类，或覆盖不需要的样式。

<Card :header-classes="[$style.header]">
  <template #header>
    stuff
  </template> …

在我使用 React Formik 库创建的 React Form 中，每当出现错误时，我想将输入元素边框颜色的样式更改为1px 纯红色。

但正如我们所知，react formik 每当发现新的验证错误时都会使用 ErrorMessage 渲染一个新的错误组件，所以基本上，当错误发生时，我们如何更改现有的输入字段颜色？

CSS：

.formGroup input {
  width: 100%;
  border: none;
  border-bottom: 1px solid black;
}
.formGroup input:focus {
  outline: none;
}
.formGroup button {
  background-color: antiquewhite;
  border-radius: 3px;
  border: none;
  font-size: 15px;
  padding: 10px;
}
.error {
  color: red;
  text-align: start;
  font-size: 13px;
}

代码：

import React, { Component } from "react";
import classes from "./P.module.css";
import { NavLink } from "react-router-dom";
import { Formik, Form, Field, …

是否可以在一个 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 {
}

我使用 create-react-app 创建了一个应用程序。我通过配置 webpack 文件来使用 CSS 模块。当我使用 reactstrap Bootstrap 类出现但样式不适用。

按照https://reactstrap.github.io/ 的说明进行操作

在 index.js 文件中也导入了 CSS，但样式不适用。

 {
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: …

我在 CSS 中使用连字符命名约定，CRA 的开箱即用 CSS 模块不会将其转换为 JS 文件中的驼峰命名法。这迫使我使用括号语法，例如styles["my-class"]，这很糟糕。className={styles.myClass}更具可读性和更易于使用。

有没有办法在不弹出或使用的情况下改变它react-app-rewired？我不在乎 CSS 中的驼峰式外壳，但这是我最后的手段。

我在 next.js 中使用带有 Sass 的 css 模块，但出现此错误

:global {
    .slick-track {
        display: flex; // Syntax error: Selector ":global .slick-track" is not pure (pure selectors must contain at least one local class or id)
    }
}

这与官方的 css-modules 文档示例相同，但使用 Sass 而不是 Less，但在 Sass 语法中，这应该可以工作。

我看到了这个问题，但它使用了一个标签，而我使用的是一个类，所以它应该是纯的。

当我添加()到 :global 时，它不会弹出错误，但样式未应用（您在浏览器控制台中找不到此样式）

:global() {
    .slick-track {
        display: flex; // No error, but style not working
    }
}

对于这个 scss 文件，它没有任何依赖项（@import @use等），但我认为情况并非如此。

我尝试postcss.config.js根据此添加自定义但也不起作用。

我正在将我的项目从 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 警告：