需要不起作用。 require('./ path / file.css')

时间:2019-06-14 08:41:54

标签: javascript css reactjs webpack ecmascript-6

我已经在我的应用中安装了“ reapop” npm软件包。看起来功能正在起作用,但是样式尚未应用。 调试时,我发现某些“ reapop”文件中的“ require”无法正常工作。

以下是代码示例:

'use strict';

var css = require('./lib/styles.css');  // file exists

//!!!!!!!  css = undefined   !!!!!!!!!!!

// media breakpoint - small screen min width
var smallScreenMin = 768;

// default className for NotificationsSystem component
var notificationsSystemClassName = css['notifications-system'];

// default className for NotificationsContainer component
debugger
var notificationsContainerClassName = {
  main: css['notifications-container'],
  position: function position(_position) {
    return css['notifications-container--' + _position];
  }
};

这是我的webpack配置:

    const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');

    const paths = require('./paths');

    module.exports = {
      mode: 'development',
      entry: ['babel-polyfill', paths.entryPoint],
      output: {
        path: paths.outputPath,
        publicPath: '/',
        filename: path.join('js', '[name].js'),
      },
      resolve: {
        extensions: ['.js', '.jsx'],
        modules: ['node_modules', paths.src],
        alias: {
          config: paths.appConfig,
          static: paths.publicFiles,
          public: paths.publicFiles,
        },
      },
      devtool: 'source-map',
      module: {
        rules: [
          {
            test: /\.jsx|.js?$/,
            exclude: /node_modules/,
            use: 'babel-loader',
          },
          {
            test: /\.svg$/,
            options: {
              includePaths: [`${paths.publicFiles}/assets`],
            },
            loader: 'svg-sprite-loader',
          },
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },
          {
            test: /\.scss$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: true,
                  localIdentName: '[local]',
                },
              },
              {
                loader: 'sass-loader',
                options: {
                  includePaths: [paths.scss],
                },
              },
            ],
          },
          {
            include: [paths.publicFiles],
            exclude: [path.join(paths.publicFiles, 'index.html')],
            loader: 'file-loader',
          },
        ],
      },
      plugins: [
    new HtmlWebpackPlugin({
      template: path.join(paths.publicFiles, 'index.html'),
      favicon: `${paths.publicFiles}/assets/favicon.png`,
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env.PROJECT_ENV': JSON.stringify(process.env.PROJECT_ENV),
      'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL),
    }),
  ],
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: process.env.PORT || 3000,
  },
};

浏览器向我显示以下警告:

Warning: Failed prop type: The prop `theme.notificationsContainer.className.main` is marked as required in `NotificationsContainer`, but its value is `undefined`.

enter image description here

不知道为什么会这样。

0 个答案:

没有答案