Reactjs 将react无限日历与css模块一起使用

我想将组件用于个人项目。它没有拾取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: /\.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>
    );
  }

}

从“React”导入React；
从“反应无限日历”导入无限日历；
导入'react infinite calendar/styles.css'；//只需要导入一次
从“../../server/constants/date”导入{TODAY}；
导出默认类DateSelector扩展React.Component{
render（）{
返回(
);
}
}

我通过为本地范围的

css模块

和全局范围的模块分离网页包加载程序来解决这个问题。我的网页包配置如下，因此对于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'}
    ])
  ]
};

---

为了解决这个问题，我必须为本地范围的

css模块

和全局范围的模块分离网页包加载程序。我的网页包配置如下，因此对于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'}
    ])
  ]
};

---

另一个选项是从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',
  },
]

---

另一个选项是从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',
  },
]