在css-modules中使用react-infinite-calendar

Question

我想爲個人項目使用react-infinite-calendar組件。這不是拾取CSS。我認爲我的webpack配置是我使用react-css-modules的問題。

有人能告訴我我需要做些什麼才能讓它工作嗎？

我的WebPack配置爲：

const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const path = require('path'); 

module.exports = { 
    entry: './index.js', 
    context: path.join(__dirname, 'client'), 
    devtool: 'source-map', 
    output: { 
    path: './dist/client/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     }, 
     { 
     // https://github.com/gajus/react-css-modules 
     test: /\.css$/, 
     loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.json'] 
    }, 
    plugins: [ 
    new CopyWebpackPlugin([ 
     {from: 'static/index.html'} 
    ]) 
    ] 
}; 

我的日期選擇器組件是：

import React from 'react'; 
import InfiniteCalendar from 'react-infinite-calendar'; 
import 'react-infinite-calendar/styles.css'; // only needs to be imported once 

import {TODAY} from '../../server/constants/date'; 

export default class DateSelector extends React.Component { 

    render() { 
    return (
     <div> 
     <InfiniteCalendar 
     width={400} 
     height={600} 
     selectedDate={TODAY} 
     maxDate={TODAY} 
     /> 
     </div> 
    ); 
    } 

} 

Answer 1

我工作圍繞這一具有爲本地分離的WebPack裝載機作用域css-modules和全局範圍的。我的webpack配置在下面，所以對於css模塊我不得不命名文件，所以它們以.module.css結尾。

const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const path = require('path'); 

module.exports = { 
    entry: './index.js', 
    context: path.join(__dirname, 'client'), 
    devtool: 'source-map', 
    output: { 
    path: './dist/client/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     }, 
     { 
     // https://github.com/gajus/react-css-modules 
     test: /\.module.css$/, 
     loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
     }, 
     { 
     test: /^((?!\.module).)*css$/, 
     loader: 'style-loader!css-loader' 
     }, 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.json'] 
    }, 
    plugins: [ 
    new CopyWebpackPlugin([ 
     {from: 'static/index.html'} 
    ]) 
    ] 
}; 

Answer 2

另一種選擇是從你的CSS模塊加載排除react-infinite-calendar並將其包含在標準的CSS加載器。

這樣你就不必重命名所有的CSS文件。

loaders: [ 
    { 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader' 
    }, 
    { 
    test: /\.css$/, 
    exclude: /react-infinite-calendar/, 
    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 
    }, 
    { 
    test: /\.css$/, 
    include: /react-infinite-calendar/, 
    loader: 'style-loader!css-loader', 
    }, 
]