CSS-Module mit 3. Pakete CSS

Question

hier ist meine ursprüngliche webpack Einstellung

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

wenn ich CSS-Module verwendet werden soll, muss ich meine Einstellung mit 3. bis

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

Aber ich habe Problem bearbeiten Party-Pakete

Eine davon ist die import 'rc-collapse/assets/index.css'; Arbeit nicht

Und eine andere ist, ich habe s ome css wie

.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;*/ 
} 

Es ist im Paket react-popover, überschreiben ich seine CSS, aber CSS-Module kann es nicht

lesen Ich denke, es liegt daran, dass ich so etwas wie className={styles[Popover-body]}

schreiben didnot aber es ist ein 3rd-Party-Paket, ich weiß, don, wo className={styles[Popover-body]}

Wie normale CSS lesen konnte hinzufügen CSS (loaders: ['style', 'css', 'sass']}) und CSS-Module (loaders: [ 'style?sourceMap', 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]) ??

Answer 1

Liefen zu dieser Ausgabe heute. Musste eine Menge Dinge tun - beachten Sie die Reihenfolge der Zeilen und sogar String-Angelegenheiten.

1. Stellen Sie sicher, Sie Ihre CSS-Datei in Ihrem JSX/Componenet wie so fordern:
   import React, {Component} from 'react'; import 'rc-collapse/assets/index.css'; import Collapse, {Panel} from 'rc-collapse';

2. Ihre webpack.config.js Stellen Sie sicher, enthält Knotenmodule für 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', }] }

Das reparierte es für mich und ich war in der Lage, das CSS für die rc-Kollaps-Komponente zu bekommen, die ich installierte und meine eigenen Stile hinzufügte. Lass es mich wissen, wenn das hilft!