reactjs - 用于内部加载 CSS 的 Webpack 配置

问题描述

我有一个第三方库调用'react-big-scheduler'，我已经像这样导入到我的组件中

import React from 'react';
import Scheduler, {SchedulerData, ViewTypes, DATE_FORMAT} from 'react-big-scheduler'

import moment from 'moment'

class MyScheduler extends React.Component {

   render() {
     // render scheduler
   }

}

export default MyScheduler;

问题是当我要使用 webpack 编译这个组件时，我从 webpack 收到一个错误，说Module parse failed: Unexpected character '#' as the component 'SchedulerData' requires some CSS files from node_modules

错误：

ERROR in ./node_modules/react-big-scheduler/lib/css/antd-globals-hiding-hack.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #RBS-Scheduler-root {
|   /* stylelint-disable at-rule-no-unknown */
|   /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
 @ ./node_modules/react-big-scheduler/lib/index.js 699:0-45
 @ ./src/components/scheduler/MyScheduler.js
 @ ./src/components/DataSet.js
 @ ./src/components/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js ./src/index.js

我如何配置 webpack 以内部加载这样的 CSS 文件，这是我的 webpackdev环境配置

// 仅与开发相关的配置数据

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');

const paths = require('./paths');
// import common webpack config
const common = require('./webpack-common-config.js');

module.exports = merge(common, {
  entry: [paths.appIndexJs],
  mode: 'development',
  // devtool option controls if and how source maps are generated.
  // see https://webpack.js.org/configuration/devtool/
  // If you find that you need more control of source map generation,
  // see https://webpack.js.org/plugins/source-map-dev-tool-plugin/
  devtool: 'eval',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
      },
    }),
  ],
  module: {
    rules: [
      {
        // look for .js or .jsx files
        test: /\.(js|jsx)$/,
        // in the `src` directory
        include: path.resolve(paths.appSrc),
        exclude: /(node_modules)/,
        use: {
          // use babel for transpiling JavaScript files
          loader: 'babel-loader',
          options: {
            presets: ['@babel/react'],
          },
        },
      },
      {
        // look for .css or .scss files
        test: /\.(css|scss)$/,
        // in the `src` directory
        include: [path.resolve(paths.appSrc)],
        exclude: /(node_modules)/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              discardDuplicates: true,
              importLoaders: 1,
              // This enables local scoped CSS based in CSS Modules spec
              modules: true,
              // generates a unique name for each class (e.g. app__app___2x3cr)
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
});

我错过了什么？需要你的帮助

标签： reactjswebpack

reactjs - 用于内部加载 CSS 的 Webpack 配置

问题描述

解决方案

推荐阅读