Конфигурация Webpack для внутренней загрузки CSS

Question

У меня есть сторонняя библиотека с именем'act-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;

Проблема в том, что когда я собираюсь скомпилировать этот компонент с помощью веб-пакета, я получаю сообщение об ошибке из веб-пакета, в котором говорится: Ошибка синтаксического анализа модуля: неожиданный символ '#' в качестве компонента 'SchedulerData', требующий некоторых файлов CSS из 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

Как я могу настроить веб-пакет для внутренней загрузки файлов CSS, например, Вот моя конфигурация webpack для dev environment

// данные конфигурации, относящиеся только к разработке

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,
            },
          },
        ],
      },
    ],
  },
});

Я что-то пропустил? нужна твоя помощь

Answer 1

Вы можете использовать загрузчик shebang, который упоминался в выпуске веб-пакета № 2168. Просто добавьте его в правило .js, чтобы убрать строку.