4

我已经使用 ModularCSS 和 webpack 启用了 postCSS:

{
  test: /\.css$/,
  exclude: /node_modules/,
  loader: "style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader"
}

这意味着我现在可以像这样导入“CSS 模块”:

组件/app.js

import '../style/bootstrap.css';

这将确保整个应用程序基于引导程序的“全局 css”,例如重置。

此外,在组件中,我可以清楚地定义它们对 Bootstrap 的依赖关系,例如:

组件/control.js

import Bootstrap from '../style/bootstrap.css';

class Control extends Component {

  render() {
    return (
      <button className={Bootstrap.btn + ' ' + Bootstrap['btn-primary']}>choose me</button>
    );
  }
}

但是,语法className={Bootstrap.btn + ' ' + Bootstrap['btn-primary']}难以阅读且不易使用。

这个问题以前解决过吗?关于如何使其更具可读性和可操作性的任何建议?

4

2 回答 2

1

你看过 React CSS 模块吗?

使用装饰器,看起来很有用。

https://github.com/gajus/react-css-modules#decorator

对于多个类名,您需要将此选项设置为 true

https://github.com/gajus/react-css-modules#allowmultiple

于 2016-05-02T17:12:33.753 回答
1

您可以尝试使用classNames

import Bootstrap from '../style/bootstrap.css';

let cx = classNames.bind(Bootstrap);


class Control extends Component {

  render() {
    let className = cx({
      btn: true,
      'btn-primary': true
    });
    return (
      <button className={className}>choose me</button>
    );
  }
}
于 2016-05-01T09:28:43.800 回答