标签: css-modules

我正在为我的项目使用css模块,我有一个文件positioning.css,它有一些我想导入的有用类.例如.right, .left

使用CSS模块的最佳方法是什么？

目前我可以看到两个选项,但它们并不是那么好:

组件风格的组成

.right {
    composes: right from '../styles/positioning.css';
}

要么

组件中的多个css模块导入

import positioning from '../styles/positioning.css'
import styles from './myComponent.css';
Object.assign(styles, positioning)

class Menu extends Component {

  render() {

    return (
      <div styleName='menu'>
        <div styleName='left'>this is left</div>
        <div styleName='right'>this is right</div>
      </div>
    );
  }
};

export default CSSModules(Menu, styles);

我正在使用CSS代码来使用CSS Grid和CSS Modules进行项目.但是,当我尝试这样的事情

.loginRegisterDiv {
  composes: loginDiv;
  margin: 0px;
  width: 100%;
}

我收到一个错误,说组成了"未知属性".另外我使用的是css网格,在VS代码中似乎没有任何intellisense.我需要安装扩展程序吗？

我正在使用rallycoding规则集.

我试图建立一个阵营与项目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 模块的“组合”特性并不适合这里......

你有一些有效的示例配置吗？

为webpack设置:

{
  test: /\.scss$/,
  use: ['style-loader', {
    loader: 'css-loader',
    options: {
      modules: true,
      localIdentName: '[local]--[hash:base64:5]',
    },
  }, 'sass-loader'],
},

用法:

background: url('~assets/arrow-white.svg') center no-repeat;

输出:

Module not found: Error: Can't resolve './assets/arrow-white.svg'

我可以省略~或使用~/../assets它并且它可以工作,但我想使用它~.

• 可能相关的错误:如果与https://github.com/webpack-contrib/css-loader/issues/589一起使用,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,但是有没有其他的解决方法可以避免使用不必要的标记,我在这个时候完全没有意识到这一点？:)

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

我正在使用 CSS 模块，到目前为止一切都很好。

我们开始使用外部 UI 库和我们自己的 UI 库，所以我正在编写这样的组件：

<div className={styles['my-component']}>
   <ExternalUIComponent />
</div>

假设ExternalUIComponent有自己的类，在最终的 CSS 文件中看起来像这样external-ui-component，我如何从我的css文件中调整这个组件样式？下面的例子不起作用：

.my-component {
   font-size: 1em;
}

.my-component .external-ui-component {
   padding: 16px;
   // Some other styling adjustments here
}

如果我有一个react组件并且我想传入一个className,我该如何使用CSS模块执行此操作.它目前只提供className但不提供我将获得的哈希生成的css模块名称 <div className={styles.tile + ' ' + styles.blue}>

这是我的Tile.js组件

import React, { Component } from 'react';

import styles from './Tile.css';

class Tile extends Component {

  render() {

    return (
      <div className={styles.tile + ' ' + this.props.color}>
        {this.props.children}
      </div>
    );
  }
};

export default Tile;

Tile.css

@value colors: "../../styles/colors.css";
@value blue, black, red from colors;

.tile {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.black {
  background-color: black;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
} …

我现在正在使用带有AngularJS 1.5组件的css-modules.堆栈是webpack+ css-loader?modules=true+ angular 1.5 components+ pug.

目前,我必须执行以下步骤才能在我的pug模板中使用css模块.

// my-component.js

import template from 'my-component.pug';
import styles from 'my-component.css';

class MyComponent {
    constructor($element) {
        $element.addClass('myComponent');        // ------ (1)
        this.styles = styles;                    // ------ (2)
    }
}

angular.module(name, deps)
    .component('my-component', {
        controller: MyComponent,
        template: template,
    });

// my-component.pug
div(class={{ ::$ctrl.styles.fooBar }}) FooBar    // ----- (3)

// my-component.css
.myComponent { background: green; }
.fooBar { color: red; }

有两个问题:

1. 每个组件都必须$element手动注入和设置其类名.这样做的原因是,AngularJS组件标签本身存在于没有任何类的结果HTML中,这使得CSS变得困难.例如,如果我MyComponent像上面这样使用:

   <div>
     <my-component></my-component>
   </div>
   

   Run Code Online (Sandbox Code Playgroud)

   它将生成以下HTML: …