标签: react-css-modules

我试图建立一个阵营与项目react-css-modules,的WebPack和热模块的更换.一切都像魅力一样,但我不能让CSS源图工作.

我按照本指南制作了HMR.它涉及一个BrowserSync设置,用于在Webpack将其写入磁盘后更新css文件.

我使用(如react-css-modules建议)ExtractTextPlugin来提取所有的css:

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
}

但是,如果我将其更改为源图,如此处所示

loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass-loader outputStyle=expanded&sourceMap=true&sourceMapContents=true')

我收到错误:"root" CSS module is undefined.在我的浏览器控制台中.

你可以在这里找到我的示例repo ,但这里是我用于开发的完整webpack配置.

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin').default;

module.exports = {
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client',
      './index.js'
    ]
  },
  devtool: 'cheap-module-source-map',
  debug: true,
  devServer: devServer,
  context: path.resolve(__dirname, './src'),
  output: {
    path: path.resolve(__dirname, './builds'),
    filename: '[name].js', …

所以我正在构建一个反应应用程序并有一个简单的问题。如果我有两个独立的组件： 和 分别带有CSS类navigation.css和navigationLogo.css。在navigation.css中我有一个名为.main的类，在navigationLogo.css中我想要一个像这样的类：

.main .main_in_logo {
 color: red;
}

但是对于 CSS 模块我无法做到这一点，有什么解决办法吗？

我非常了解 CSS 模块的概念，以至于我确信我不想为将来做任何其他事情。

目前我正在尝试重构一个现有的应用程序以使用 CSS 模块，该应用程序从那时起就使用了经典的 sass 和 BEM 方法。

在我描述我的问题之前，我想明确表示我不明白我正在解决一个并不真正属于 CSS 模块领域的问题。应该仅在单个模块内应用样式。最多应该将 CSS 类与其他模块的其他 CSS 类组合在一起。但基本上：您构建一个 (HTML-) 模块，然后使用 CSS 模块来设置该模块的样式，仅此而已。

这就是问题所在：在重构过程中，有一个问题源于拥有基于 SASS 的样式系统。当此类应该与来自另一个模块的另一个类结合使用时，我找不到在 CSS 模块环境中使用 CSS 类的有效方法。

SASS 中的示例：

[页面.scss]

.wrapper {
    margin: 0;
}

[标题.scss]

.headline {
    color: green;
}
.wrapper {
    .headline {
        color: orange;
    }
}

如您所见：一个模块（页面）定义了一个 CSS 类“包装器”，另一个模块定义了一个 CSS 类“标题”。此外，当放置在类“包装器”中时，类“标题”的行为应该有所不同。

同样，我知道这并不是 CSS 模块的真正领域。但我真的很想知道这是否可以通过 CSS 模块实现？CSS 模块的“组合”特性并不适合这里......

我试图在React中创建一个无状态组件,其唯一目的是充当可重用的包装器.我也在使用CSS模块,因为我想拥有完全模块化的CSS.

问题是我不想添加不必要的元素(甚至更多的是<div>s),而是我想使用React的片段.

现在,我遇到的问题是Fragment(至少现在)不接受classNames.所以如果我试试这个:

//在Wrapper.js中:

import React, { Fragment } from 'react'
import styles from './Wrapper.css'

const wrapper = (props) => (
    <Fragment className={styles.wrapper}>
        {props.children}
    </Fragment>
)

export default wrapper

在(例如)Navbar.js中:

import React from 'react'
import styles from './Navbar.css'
import Wrapper from '../../Layout/Wrapper'

const navBar = (props) => (
    <nav className={styles.navBar}>
        <Wrapper>
            This is the site's main navigation bar.
        </Wrapper>
    </nav>
)

export default navBar

现在我可以使用div而不是Fragment,但是有没有其他的解决方法可以避免使用不必要的标记,我在这个时候完全没有意识到这一点？:)

提前感谢任何见解,推荐,更正或任何其他形式的帮助!

我正在使用webpack和React与react-css-modules和scss文件.当我尝试构建它时,每个导入scss文件的文件都会出现错误 -

ERROR in ./app/components/Buttons/Button.scss
Module build failed: ReferenceError: window is not defined

我用谷歌搜索了一整天,没有在哪里!请帮忙!

这是我的webpack设置:

var webpack = require('webpack');
var PROD = (process.env.NODE_ENV === 'production');
var precss       = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: [
        './app/index.jsx'
    ],
    output: {
        path: __dirname + '/dist',
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
    },
    watchOptions: {
        poll: true
    }, …

下面是我的Greeter.jsx文件:

import React, {Component} from 'react';
import cssModules from 'react-css-modules';
import {Button} from 'react-bootstrap';
import styles from './Greeter.css';

const option = {
  'allowMultiple': true
};

class Greeter extends Component{
  render() {
    return (
      <div styleName='root root-child'>
        <h1>Welcome to React Devops.</h1>

        <p styleName="para">This is an amazing para.</p>
        <p>Hot module reload.</p>

        <Button bsStyle="primary">Test</Button>
      </div>
    );
  }
}

export default cssModules(Greeter, styles, option);

下面是我的main.js文件:

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap-theme.min.css';

import './main.css';

render(<Greeter …

CardComponent假设我们有这样的第三方

<Card title="This is a title in the header">This is text in the body</Card>

这会以纯 HTML 形式呈现

<div class="Card">
  <div class="CardHeader"></div>
  <div class="CardBody"></div>
</div>

我使用 css 模块进行样式设置（在本例中为 scss）。

.customCard {
  .CardBody {
    color: red;
  }
}

然后将类添加到Card中

import styles from ...
...
<Card className={styles.customCard} ...>...</Card>

上面将不起作用，因为它为CardBodylike创建了一个生成的类CardBody_sjkdh43。有没有办法在模块中选择非生成的类名？或者这只能以旧时尚的方式使用样式表？

演示沙盒

我正在使用 NextJS，它使用 CSS 模块，我想使用一些 CSS 库，例如 Material UI，...但是如何覆盖从这些库导入的组件的样式？...

我最近开始在 next.js 项目中使用模块，但在新创建的 .module.scss 文件中不断收到此错误：“Selector ":root" is not pure（纯选择器必须包含至少一个本地选择器）类或 ID）”。我知道这是因为我没有使用纯 css 选择器，就像我在网上其他地方看到的那样，唯一的问题是我正在使用的导入，但我需要这些变量的导入，如$cl-light-gray下面的示例文件所示：

@import "src/common/styles/global-styles.scss";
@import "node_modules/bootstrap/scss/bootstrap";
@import "src/common/styles/palette.scss";
@import "src/common/styles/typography.scss";

.dashboard-dropdown-hover {
  @extend .px-1;
  @extend .py-2;
  @extend .mt-3;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: 200ms;
  background-color: transparent;
}
.dashboard-dropdown-hover:hover {
  background-color: $cl-light-gray;
}

有谁能解决我应该如何解决这个导入问题？我知道如果我切换回 .scss 它将起作用，但我试图避免导入 _app.tsx 中的所有 .scss 文件，因为这将至少有 30 个导入，而且这些样式并不打算是全局的。最后，当我使用 Sass 时，为什么 Next.js 期望我使用纯 css 选择器，而使用 Sass 是因为它的非纯元素？

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

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

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

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