使用模块化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模块”： components/app.js

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

这将确保整个应用程序基于Bootstrap的“全局CSS”，例如重置。

此外，在组件内，我可以清晰地定义它们对Bootstrap的依赖关系，例如：

components/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']} 这个语法难以阅读和操作。

这个问题之前有没有被解决过？有什么建议可以使它更易读和可操作吗？

- Tom

Answer 1

你看过 React CSS modules 吗？

使用这个装饰器，它似乎非常易用。

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

如果需要使用多个类名，您需要将此选项设置为true

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

- user3200167

---

我也是这么想的。不幸的是，它对于像Bootstrap这样的依赖项不起作用，尽管我不确定为什么--请参见https://github.com/gajus/react-css-modules/issues/119 - Tom

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>
    );
  }
}

- QoP

---

这是不可能的，因为CSS模块具有本地化的样式名称。也就是说，只能像我编辑后的答案那样实现，甚至比以前更难读。 - Tom

可能是因为你在webpack配置中排除了“node_modules”，而Bootstrap的CSS文件就在那里（不确定xD）。 - QoP

什么意思？Bootstrap CSS不在那里，它是从../styles/bootstrap.css加载的。它正在被加载。问题在于CSS模块（PostCSS插件）本地化了实际的className，因此它不是像btn这样的东西，而是像btn + 一些随机字符串这样的东西。 - Tom

看起来这个确实可以工作，但我必须使用import classNames from 'classnames/bind';而不是import classNames from 'classnames';。请注意，我也不能使用btnPrimary: true，而必须使用'btn-primary': true。然而，最终结果似乎并不好。也许在我的原始方法中使用字符串连接更易读。它肯定会减少很多代码。 - Tom