将 react-infinite-calendar 与 css-modules 一起使用

Question

我想使用 react-infinite-calendar component for a personal project. It's not picking up the css. I think my webpack configuration is the problem as I'm using 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',
  },
]

将 react-infinite-calendar 与 css-modules 一起使用

Using react-infinite-calendar with css-modules

reactjs

webpack

react-css-modules