與第3包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';不行

，另一個是我含有S像

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

青梅CSS它在包裝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

今天就遇到這個問題。必須做一堆事情 - 注意行順序，甚至字符串事項。

1. 確保您需要你的CSS文件在你的JSX /像組元這樣：
   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。讓我知道如果這有幫助！