我已经在我的应用中安装了“ 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`.
不知道为什么会这样。