Почему не подключается css файл в Webpack?

Question

[SuperProshka]

Добрый день!
Я собираю ts проект с помощью webpack.
Конфиг выглядит так:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");



const app = {
    mode: "production",
    entry: "./src/start.tsx",
    optimization: {
        minimize: false,
        minimizer: [
        new TerserPlugin({
            terserOptions: {
            mangle: true,
            toplevel: true,
            },
        }),
        ]
    },
    output: {
        filename: (pathData) => {
            const date = new Date().toJSON().slice(0,10);
            var seconds = new Date().getTime() / 10000;
            return date + '.' + Math.round(seconds) + '.app.js';
        },
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: (pathData) => {
                const date = new Date().toJSON().slice(0,10);
                var seconds = new Date().getTime() / 10000;
                return date + '.' + Math.round(seconds) + '.app.css';
            },
        }),
    ],
    resolve: {
        alias: {
            '@': path.join(__dirname, './src/'),
        },
        extensions: ['.jsx', '.tsx', '.ts', '.d.ts', '.js', '.css'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|tsx|ts)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, {
                    loader: 'css-loader', 
                    options: {
                        modules: {
                            mode: "local",
                            localIdentName: "dash-[hash:base64]"
                        }
                    }
                  }],
            },
        ],
      },
}


module.exports = [app]

В коде я использую react-loading-skeleton и поэтому подключаю стили с помощью
import 'react-loading-skeleton/dist/skeleton.css'

С приведенной выше конфигурацией стили не работают и skeleton не отображается.
Но если в конфиге поменять описание css-loader на вот такое:

module: {
        rules: [
            {
                test: /\.(js|jsx|tsx|ts)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
        ],
      },

То все начинает работать.
Насколько я понимаю, у меня переименовываются классы из этого файла, хотя не должны.
Как можно пофиксить проблема?
p.s. модификация имен классов мне нужна, так как я использую результирующий бандл как библиотеку.

Answer 1

[maxonklakson]

Проблема в том, что Webpack был настроен обрабатывать все сss файлы как модули. При подключении skeleton.css из папки node_modules, Webpack автоматически ставил свой префикс на все классы, и стили из библиотеки исчезали (потому что у нее .skeleton, а Webpack ее меняет на dash-abc123 и поиск слетает). Решение: сделать так, чтобы Webpack обрабатывал только сss внутри нашего проекта как модули, а все что из node_modules - "как есть".
Просто добавляем одну строчку - пусть Webpack понимает, что все что из node_modules нам пока не надо трогать. Вот пример:

module: {
  rules: [
    {
      test: /\.(js|jsx|tsx|ts)$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    },
    {
      test: /\.css$/i,
      oneOf: [
        {
          // твои файлы — модули
          include: path.resolve(__dirname, 'src'),
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: {
                  localIdentName: 'dash-[hash:base64]',
                },
              },
            },
          ],
        },
        {
          // всё остальное — обычный css
          exclude: path.resolve(__dirname, 'src'),
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
          ],
        },
      ],
    },
  ],
}

И всё, теперь react-loading-skeleton работает, и у нас сохранена изоляция стилей.

Answer 2

[flksshk]

проблема в том что ты применяешь css модули ко всем файлам, включая react-loading-skeleton. эта библиотека ожидает типо того что классы останутся в исходном виде, но при использовании css модулей классы переименовываются и стили не работают. для решения просто свои стили обрабатывай через модули а которые импортишь - без.