1

我想将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>
    );
  }

}
4

2 回答 2

3

另一种选择是从您的 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',
  },
]
于 2016-07-28T05:08:46.800 回答
1

css-modules我不得不为本地范围和全局范围的webpack 加载器分离 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'}
    ])
  ]
};
于 2016-06-19T14:06:02.880 回答