我已经使用 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']}
难以阅读且不易使用。
这个问题以前解决过吗?关于如何使其更具可读性和可操作性的任何建议?
最佳答案
你看过 React CSS 模块吗?
使用装饰器,好像很好用。
https://github.com/gajus/react-css-modules#decorator
对于多个类名,您需要将此选项设置为 true
关于javascript - 在 Bootstrap 4 和 React 中使用模块化 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36965031/