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

Question

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

styles.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') 然后console.log(css) 结果如下

问题

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

Answer 1

您不能使用 css-loader 和 style-loader 执行此操作，但您可以使用 react-css-modules 将特定类导入到您的反应文件中。

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