带有第三个包的 css 模块 css

Question

这是我原来的 webpack 设置

{ test: /(\.css|\.scss)$/, loaders: ['style', 'css', 'sass']},

如果我想使用 css 模块，我需要将我的设置编辑为

{
    test: /\.css$/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
  }

但是我遇到了第 3 方包的问题

一个是import 'rc-collapse/assets/index.css';不行

另一个是我有一些类似的css

.Popover-body {
  display: inline-flex;
  flex-direction: column;
  /*padding: 2rem 4rem;*/
  /*background: hsl(0, 0%, 27%);*/
  background: #B1C5D0;
  color: black;
  border-radius: 0.3rem;
  /*border: 1px;*/
}

在 react-popover 包里，我覆盖了它的 css，但是 css 模块无法读取它

我想是因为我没有写className={styles[Popover-body]}之类的东西

不过是第3方包，不知道在哪加className={styles[Popover-body]}

css 如何同时读取普通 css(loaders: ['style', 'css', 'sass']}) 和 css 模块 (loaders: [ 'style?sourceMap', 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5])？？

Answer 1

今天跑到这个问题上。必须做很多事情——注意行的顺序，甚至是字符串。

1. 确保您在 JSX/Componenet 中需要您的 css 文件，如下所示：
   import React, {Component} from 'react'; import 'rc-collapse/assets/index.css'; import Collapse, {Panel} from 'rc-collapse';

2. 确保您的 webpack.config.js 包含用于 css 的节点模块 module: { loaders: [{ test: /\.css$/, include: /node_modules/, loaders: [ 'style?sourceMap', 'css' ] }, { test: /\.css$/, exclude: /node_modules/, loaders: [ 'style?sourceMap', 'css?modules&importLoaders=1&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]', ] }, { test: /\.jsx?$/, loader: 'babel', include: SRC_DIR, exclude: /node_modules/ }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff', }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader', }] }

这为我修复了它，我能够获得我安装的 rc-collapse 组件的 css 并添加我自己的样式。让我知道这是否有帮助！