相关疑难解决方法(0)

我正在使用 CSS 模块，到目前为止一切都很好。

我们开始使用外部 UI 库和我们自己的 UI 库，所以我正在编写这样的组件：

<div className={styles['my-component']}>
   <ExternalUIComponent />
</div>

假设ExternalUIComponent有自己的类，在最终的 CSS 文件中看起来像这样external-ui-component，我如何从我的css文件中调整这个组件样式？下面的例子不起作用：

.my-component {
   font-size: 1em;
}

.my-component .external-ui-component {
   padding: 16px;
   // Some other styling adjustments here
}

反应和所有这些东西都很新，所以我需要一些帮助。我最近在我的项目中添加了https://github.com/gajus/babel-plugin-react-css-modules插件。经过一些麻烦，我让它工作了，所以我现在可以在我的组件中使用我的本地 css 文件。到现在为止还挺好。

不是我想为整个应用程序添加引导程序。在我添加 css-modules 插件之前它工作了......

这是我的代码的相关部分（我猜......如果我错过了什么让我知道）：

index.js（我的应用程序的入口点）：

import 'bootstrap/dist/css/bootstrap.min.css';
...

.babelrc：

{
    "presets": [
        "react"
    ],
    "plugins": [
      ["react-css-modules", {
        "exclude": "node_modules"
      }]
    ]
}

webpack.config.js :

/* webpack.config.js */

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'eval',

  entry: [
    path.resolve('src/index.js'),
  ],

  output: {
    path: path.resolve('build'),
    filename: 'static/js/bundle.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve('src'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader', …