如何使用 webpack 和 css-loader 只加载特定的 css class？

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 class 例如var fooClass = css.foo，我打算将其与我的 React 组件一起使用，例如<input style={ foo }/> 或者 <input className={ foo }/>

Answer 1

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

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

How to use webpack and css-loader to load only specific css class?