Question

我有一个名为'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收到一条错误消息，提示模块解析失败：意外的字符'＃'作为需要一些CSS文件的组件'SchedulerData'来自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文件，这是我在dev环境中的webpack配置

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

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

您可以使用在webpack第2168期中提到的shebang-loader。只需将其添加到您的.js规则中，即可删除该行。

用于内部加载CSS的Webpack配置

1 个答案: