有没有办法在es6中导入一个只适用于一个特定元素并且不是全局的css文件？

Question

在React中我有一个Component，我想导入一个css样式表

import styles from 'css-stylesheet.css'

或

import 'css-stylesheet.css'

<。>在'./MyComponent.jsx'

中

但是我只希望此css仅适用于此组件！我不希望它像现在这样全球化。我正在使用webpack。有没有办法在本地导入css并只将它应用到我从中导入的文件？似乎应该有办法，但我甚至无法找到有关它的问题。

这是我的webpack css加载程序代码

module: {
   rules: [{test: /(\.css)$/, loaders: ['style-loader', 'css-loader']}]
}

Answer 1

你正在使用css-loader，它支持css-modules，启用它你应该传递一个选项

{
  loader: "css-loader",
  options: {
    modules: true
  }
}

每当你导入css时，这将返回一个对象，并且该对象将包含你的css选择器与uglified选择器之间的映射，这样，样式对于组件是唯一的。

您可以通过向选项添加其他字段来定义uglified选择器的模式。 localIdentName:[name]__[local]___[hash:base64:5]