reactjs - 如何使用 webpack 和 css-loader 仅加载特定的 css 类？

Question

我正在使用 webpack，我已经安装style-loader了css-loader

样式.css

body {
    font-family: Arial;
    color: white;
}

.foo {
    color:blue;
}

.bar {
    color:red;
}

entry.js

require('!style!css!./styles.css');

var css = require('!css!./styles.css');
console.log(css);

使用require('!style!css!./styles.css')结果<style>进入页面如下

使用var css = require('!css!./styles.css')thenconsole.log(css)结果如下

是否可以仅加载特定的 css 类，例如var fooClass = css.foo，我打算将它与我的 React 组件一起使用，例如，<input style={ foo }/>或者也许<input className={ foo }/>

score 0 · Accepted Answer

您不能这样做css-loader，style-loader但您可以使用react-css-modules将特定类导入到您的反应文件中。

它仅将必要的 css 加载到文档中，并且它会class在加载时为您创建一个唯一的名称。这样，您可以在不同的组件中使用具有不同样式的相同类名！

1 回答 1