Задать вопрос
@SuperProshka

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

Добрый день!
Я собираю 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. модификация имен классов мне нужна, так как я использую результирующий бандл как библиотеку.
  • Вопрос задан
  • 34 просмотра
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы