CSS未应用于Webpacked模块

Question

我很擅长构建自己的webpack.config.js，我正在尝试使用Noty模块（显示模态通知），通过npm安装。

似乎我设法导入了Noty javascript，但没有导入CSS：当页面顶部中心的红色框显示时，通知显示在我页面的最底部，没有任何样式。

我对Webpack的理解很浅，我不知道问题是什么！下面是我的webpack.config.js和尝试使用Noty的文件。

webpack.config.js

const path = require('path');

module.exports = {
    entry: './front/app.js',
    output: {
        path: path.resolve(__dirname, 'web/js'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                },
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loaders: ['style-loader', 'css-loader'],
            },
            {
                test: /\.css$/,
                include: /node_modules/,
                loaders: ['style-loader', 'css-loader'],
            },
            {
              test: /\.html$/,
              loader: 'html-loader',
            },
        ]
    },
};

music.js

import Noty from 'noty';
import request from './request';

export default class Music {
    loadSongVersion(songVersionId, audioElement) {
        request(`/api/song-version/${songVersionId}`)
            .then((songVersion) => {
                audioElement.src = songVersion.src;
            })
            .catch((err) => {
                console.error(`Could not fetch song version by ID ${songVersionId}`);
                new Noty({
                    text: 'Error while fetching this song version',
                    layout: 'topCenter',
                }).show();
            });
    }
};

如果你们中任何一个人知道问题所在，我会非常感激！

Answer 1

您有两个条目：

       {
            test: /\.css$/,
            exclude: /node_modules/,
            loaders: ['style-loader', 'css-loader'],
        },
        {
            test: /\.css$/,
            include: /node_modules/,
            loaders: ['style-loader', 'css-loader'],
        }

第一个排除node_modules中的所有css文件，第二个包含它们。

删除排除，它应该有效。但是我会进一步建议你明确地只包含noty css文件，因为包括所有css willy-nilly可能包含一些你不想要的内容。

所以，最终的条目应该是这样的：

        {
            test: /\.css$/,
            include: /node_modules/noty/,
            loaders: ['style-loader', 'css-loader'],
        }

Answer 2

将此添加到music.js：

import 'noty/lib/noty.css'

参考：https://github.com/needim/noty/issues/368