标签: css-modules

我有一个关于作文的问题,我希望有人可以帮助我.我正在使用react-css-modulesSass,我想知道为我们的一个基本底层组件编写东西的最佳方法.

这是我们的组件:

import React, {PropTypes} from 'react'
import cssModules from 'react-css-modules'
import styles from './style.sass'

const Button = ({children = 'Submit', ...props}) => {
  const align = props.align ? `-${props.align}` : ''
  const type = props.type ? `-${props.type}` : ''
  const styleName = `button${type}${align}`

  return (
    <button onClick={props.onClick} {...props} styleName={styleName}>
      {children}
    </button>
  )
}

Button.propTypes = {
  align: PropTypes.string,
  onClick: PropTypes.func.isRequired,
  type: PropTypes.string,
}

export default cssModules(Button, styles)

到目前为止这是样式表:

@import "~components/styles/variables"

.button
  color: $button-default
  background-color: transparent
  font-family: $font-family …

我正在尝试使CSS模块与React组件一起使用.我的代码如下:

import styles from './style.css';

const Header = () => {
  return (
    <header className={styles.main}></header>
  )
};

export default Header;

CSS就是这样

.main { background: red; }

和webpack配置:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var WebpackNotifierPlugin = require('webpack-notifier');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var path = require('path');

var sassLoaders = [
  'css-loader?modules',
  'postcss-loader?modules',
  'sass-loader?sourceMaps&modules&includePaths[]=' + path.resolve(__dirname, './sass')
];

var config = {
  entry: './app/index.js',
  output: {
    path: 'public',
    filename: 'index.js'
  },
  sassLoader: {
    includePaths: path.resolve(__dirname, './sass') …

我正在尝试在我的React项目中使用CSS模块。问题的第一部分是，如果我编写嵌套的css类（使用sass），我不知道是否可以访问内部的类，因为它们似乎也被编译成唯一的类名。一些代码：

<div className={this.state.visible ? styles.header+" menu-visible" : styles.header}>
    <div className="menu">
        <a className="link">title</a>
    </div>
</div>

   .header {
       &.menu-visible {
            .menu {
                 display:block;
            }
        }
    }

我有一个包装类，有时它是“菜单可见的”，它会改变所有子级的属性，在React中像这样做是不好的做法吗？

如果菜单可见，则.header中有多个类可以更改，因此仅更改包装类将很方便，我可以以某种方式引用这些子类吗？这样剩下的嵌套在scss中吗？

编辑

我能想到的一种解决方案是将className =“ menu”替换为className = {styles.header.menu}，但这似乎行不通。问题是，如果它的父级具有菜单可见的类，我希望.menu更改其属性。

我正在尝试使用sass配置css模块.我已经按照一些教程,但似乎没有工作.webpack配置主要由create-react-scripts创建.我似乎得到了这个错误"模块未找到:无法解决'风格'"任何帮助都会很棒.错误似乎是在我下面的Modal.js文件中的import语句中生成的.(从"../css/modal.scss"导入样式;)我已经安装了sass loader.我的package.json文件可以在下面找到.

webpack.config.dev.js:

'use strict';

const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const …

我想在我的 React 项目中使用 bootstrap 4。构建的 css 文件应该只包含我在 React 组件中包含的引导程序类的样式。

我不是在搜索 Bootstrap css 类作为 React 组件；我不介意写<div className='container'>

1. 反应带

我尝试使用reactstrap，是的，将引导 css 类作为组件（例如<Container></Container>），但您必须包含所有引导样式：

在src/index.js：

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

2.scss源文件

因为我已经sass-loader尝试过直接导入 scss 文件：

import bootstrapGrid from 'bootstrap/scss/_grid.scss';
const myComponent = () => <div className={bootstrapGrid.container}>[...]</div>

但它失败了，因为它没有足够的数据来编译：

3. 其他解决方案：

• react-bootstrap我不需要反应方式的js逻辑（它是v3）
• styled-bootstrap还是太新了
• bootstrap-css-modules看起来不错，但是没有维护

什么是正确的方向？

或者我应该使用purifycss-webpack来清理我的应用程序？并删除未使用的 css 类。

我在 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根据此添加自定义但也不起作用。

假设在我的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 警告：