使用webpack捆绑，如何才能使所需的css文件仅适用于所需的组件？

Question

我有webpack正在寻找这样的css：

{
  test: /\.css$/,
  loader: 'style-loader!css-loader'
},

问题是一个组件所需的css似乎正在影响其他组件。我的理解是组件中所需的css文件将仅限于该组件和该组件。我是以错误的方式做某事还是我正在寻找无法通过webpack样式加载的功能？

Answer 1

默认情况下，css加载程序会将您的css捆绑到全局范围。您需要首先启用CSS模块，例如：

{
  test: /\.css$/,
  loader: 'style-loader!css-loader?modules'
},

然后正常写你的CSS：

.className { color: green; }

Webpack将使用唯一的类名编译您的css，您可以通过导出的模块访问它们。

require styles from 'styles.css';

console.log(styles.className) // <-- the compiled classname