使用模块化CSS与Bootstrap 4和React

Question

我已经使用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';

这将确保整个应用程序基于bootstrap的"全局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']}很难阅读，也不容易使用。

这个问题以前解决过吗？关于如何使其更具可读性和可操作性，有什么建议吗？

Answer 1

您看过React CSS模块吗？

使用decorator，它似乎非常有用。

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

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

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

Answer 2

您可以尝试使用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>
    );
  }
}