リアクションカレンダーとCSSモジュールの併用

Question

私はreact-infinite-calendarコンポーネントをパーソナルプロジェクトに使用したいと思います。それは、CSSをピックアップしていない。私は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

私はローカルcss-modules、グローバルスコープのものをスコープためWebPACKのローダーを分離することによってこの問題を回避働きました。私の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', 
    }, 
]