1

個人的なプロジェクトにreact-infinite-calendarコンポーネントを使用したいと思います。CSSを取得していません。react-css-modulesを使用しているため、webpack の構成に問題があると思います。

誰かがそれを機能させるために私が何をする必要があるかを教えてもらえますか?

私の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>
    );
  }

}
4

2 に答える 2

3

もう 1 つのオプションはreact-infinite-calendar、CSS モジュール ローダーから除外し、標準の 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',
  },
]
于 2016-07-28T05:08:46.800 に答える