Импортированные css node_modules не работают в веб-пакете

Question

У меня есть внешний импорт CSS внутри одного из моих компонентов -

import "rc-slider/assets/index.css";

Однако, при сборке с Webpack, CSS не регистрируется.Я попытался добавить импорт с префиксом тильды @import '~rc-slider/assets/index.css'; в мой файл module.css компонентов, но это не работает.Я также попытался добавить include: [path.join(__dirname, '..', 'node_modules')], в мой файл webpack.config.js, и это привело к неудачной сборке с несколькими ошибками, которые говорят You may need an appropriate loader to handle this file type. для каждого из моих файлов.

Мой файл webpack.config.js выглядит следующим образом:

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2,
                            modules: true,
                            localIdentName: "[name]__[local]__[hash:base64:5]"
                        }
                    },
                    {
                        loader: "sass-loader"
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins() {
                                return [autoprefixer];
                            }
                        }
                    },
                ]
            },
            {
                test: /\.(png|jp(e*)g|gif|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8000,
                            name: "images/[hash]-[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html"
        }),
        new BundleAnalyzerPlugin()
    ]
};

Это заняло уже полдня, поэтому любой вклад мог бы оказать огромную помощь.Спасибо.

Answer 1

После нескольких часов проб и ошибок я нашел решение.Для тех, кто столкнется с этой проблемой в будущем, я исправил ее, добавив следующий тест в мой файл webpack.config.js -

{
    test: /\.(scss|css)$/,
    include: [CODEMIRROR_PATH],
    use: [
        {
            loader: "style-loader"
        },
        {
            loader: "css-loader",

        },
    ]
},

Моя настройка конфигурации заполнения следующая -

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");
const CODEMIRROR_PATH = path.resolve(
    __dirname,
    "./node_modules/rc-slider/assets/index.css"
);

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            },
            {
                test: /\.(scss|css)$/,
                include: [CODEMIRROR_PATH],
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",

                    },
                ]
            },
            {
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2,
                            modules: true,
                            localIdentName: "[name]__[local]__[hash:base64:5]"
                        }
                    },


                    {
                        loader: "sass-loader"
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss",
                            plugins() {
                                return [autoprefixer];
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(png|jp(e*)g|gif|svg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8000,
                            name: "images/[hash]-[name].[ext]"
                        }
                    }
                ]
            }
        ]
    },    
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html"
        }),
        new BundleAnalyzerPlugin()
    ]
};

Answer 2

Использование свойства include определенно подходит.

У меня есть что-то похожее в моем коде, и я использовал это:

{
  test: /\.css$/,
  include: [CODEMIRROR_PATH],
  use: ["style-loader", "css-loader"]
},

Я включаю CodeMirror;поэтому я определяю CODEMIRROR_PATH следующим образом:

const CODEMIRROR_PATH = path.resolve(__dirname, "./node_modules/codemirror");

Что-то подобное у вас не работает?