Question

这是我原来的网络包设置

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

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

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

但我遇到了第三方套餐的问题

一个是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]}

之类的东西

但这是第三方套餐，我不知道在哪里添加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

今天赶到这个问题。不得不做一堆事情 - 注意线条甚至字符串的顺序。

确保您在JSX / Componenet中要求使用css文件，如下所示：
import React, {Component} from 'react'; import 'rc-collapse/assets/index.css'; import Collapse, {Panel} from 'rc-collapse';
确保您的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并添加我自己的样式。如果有帮助，请告诉我！

带有第3个包css的css模块

1 个答案: