标签: css-modules

有没有一种方法可以在Visual Studio代码中配置emmet以使用React的CSS模块？

当我键入... div.container并点击选项卡时，它变成<div className="container"></div>

这里的问题是它没有使用CSS模块。我希望它成为这个： <div className={styles.container}></div>

有没有办法在VS代码中获得此功能？

我正在忙着用CSS-Modules学习React,我不太明白如何存储变量？例如,在Sass中你可以这样做:

// _variables.scss
$primary-color: #f1f1f1; 

// heading.scss
@import './variables';
.heading {
  color: $primary-color
}

你如何在CSS模块中实现这一目标？

我有一个文件使用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 模块，但是我找不到任何关于其具体工作原理的示例：

:local(.class){
    /* some property */
}

默认情况下所有类都是本地类，那么:local或是什么:global意思呢？

问题

create-react-appv2+ 支持开箱即用的 TypeScript 和 CSS 模块......分别。当您尝试将两者结合使用时，就会出现问题。Facebook对这个问题进行了广泛的讨论，最终在 GitHub 上将其关闭。因此，开发人员必须使用 hacks 和其他变通方法来让这两种技术与 CRA 一起很好地发挥作用。

现有的解决方法：

您可以手动创建ComponentName.module.css.d.ts具有如下类型定义的文件：export const identifierName: string. 这允许您在导入时利用 TypeScript 的输入和 VS Code 的自动完成功能ComponentName.module.css。不幸的是，这非常乏味。

解决方案（？）：

Dropbox 的人就是typed-css-modules-webpack-plugin为了解决这个问题而创建的；它会*.d.ts为您自动生成这些文件。他们展示了如何使用yarnor安装它，npm然后给出这个最小的代码示例：

const path = require('path');
const {TypedCssModulesPlugin} = require('typed-css-modules-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
      { …

我正在使用 FileName.module.scss 来设计我的反应元素，如下所示：

// this is my component
import React from "react";

import Aux from '../../hoc/Aux';
import classes from './Layout.module.scss';

const layout = (props) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main className={classes.Content}>
            {props.children}
        </main>
    </Aux>
);

export default layout;

这是我的 SCSS：

.Content {
    margin-top: 72px;
    color:red;
}

我不知道为什么，但 scss 没有应用于我的主要元素，有什么想法吗？谢谢你！

我在带有 Webpack 的 Angular 项目中使用 CSS 模块。我已经用postcss-modules转换了.css和.scss文件中的类名。

然后使用posthtml-css-modules我更改了 html 元素中 class 属性的值，用于由 postcss-modules.

我可以说一切正常。

现在，我有一个新的挑战要解决。

Angular 有一项功能，允许您class 根据条件动态更改html 元素中的值：

https://angular.io/api/common/NgClass

例如，我可以这样做：

<div [className]="myVar ? 'myClass1' : 'myClass2' " >

如果myVar = true，则 html 元素将是：

<div class="myClass1" >

如果myVar = false，则 html 元素将是：

<div class="myClass2" >

就像我不知道myVar在编译期间的值是什么（因为 的值myVar取决于用户操作）我无法设置值<div css-module="myClass1" > 或<div css-module="myClass2" >为了散列myClass1or的类名myClass2。

但是（这是我的解决方案）...

如果我可以调用相同的函数[hash:base64:5] …

我正在尝试使用 webpack 使用 typescript 创建一个 React 项目。但我无法让 CSS 模块正常工作。尝试在打字稿中导入 CSS 文件时，我不断收到此错误：

ERROR in src/components/Button.module.css:1:0\n[unknown]: Parsing error: Declaration or statement expected.\n  > 1 | .myButton {\n    2 |         box-shadow: 0px 0px 0px -1px #1c1b18;\n    3 |         background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);\n    4 |         background-color:#eae0c2;\n\xe2\x84\xb9 \xef\xbd\xa2wdm\xef\xbd\xa3: Failed to compile.\n

对我来说，这看起来像 webpack 期望 css 文件包含有效的打字稿，但我不确定。我尝试环顾四周，虽然很多人似乎都在努力同时使用 typescript 和 CSS 模块，但我找不到任何有类似问题的人。

我像这样导入了 CSS 文件：\nButton.tsx

import React from "react";\nimport "./Button.module.css";\n\nexport class Button extends React.Component{\n...\n}\n

这是我尝试导入的 CSS 文件。\nButton.module.css：

.myButton {\n …

我不确定问题是什么，因为我已经做了很多次了，没有任何问题，所以我想我搞砸了。我将展示 Product.js 组件和模块文件，如果还缺少其他内容，请告诉我（例如，也没有 next.config.js 文件）。

提前致谢！

产品.js

import { Card } from '@material-ui/core'
import styles from '../styles/Products.module.scss'

export default function Product({ product }) {
  console.log(product)
  return(
    <Card className="product">
      <img src={product.main_image} />
      {product.name && product.name}
    </Card>
  )
}

产品.module.scss 文件

.product {
  max-width: 300px;

  & img {
    width: 100%;
  }
}

我正在使用 NextJs，我正在使用 TailwindCSS，并且我的 globals.css 中有一堆额外的样式，这些样式按照您应该做的那样导入到顶层的 _app 中。我尝试将其移至“布局”组件中，但将其放回顶部时出现错误，因此我将其保留在那里。

问题就在这里。我有一个组件，我不需要任何 globals.css 样式，只需要一小组备用样式。有什么办法可以做到这一点吗？我想删除我被迫在顶层导入的所有废话，然后只需将特定的样式表应用于该组件。