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

Question

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

import styles from 'css-stylesheet.css'

或

import 'css-stylesheet.css'

在“./MyComponent.jsx”中

但是我只希望这个 css 只适用于这个组件!我不希望它像现在这样全局化。我正在使用网络包。有没有办法在本地导入 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 选择器到丑化选择器之间的映射，这样，样式对于组件来说是唯一的。

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