I need to load css file not as usual css files

[budarin]

In our project we use styles in code throught style-loader

{
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader/useable',
                        options: {
                            hmr: true,
                            attrs: {
                                // nonce: hash,
                            },
                        },
                    },
                    {
                        loader: 'css-modules-flow-types-loader',
                        options: {
                            indent: '  ',
                            itemDelimiter: ';',
                        },
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            // importLoaders: 1,
                            localIdentName: '[name].[local]_[hash:7]',
                            sourceMap: false,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                    },
                ],
            },

but we need the only file fonts.css to be copy to dist folder as asset with name [name].[hash].[ext]

How to do it?

[alexander-akait]

@budarin { loader: "file-loader", options: { name: [name].[hash].[ext] } }? If you need this for only fonts.css use test option

[budarin]

format of the name, in this case, I've mentioned only for desired output format

may question is: how only the fonts.css (not others) copy to assets (bearing in mind existing test: /.css$/ section in webconfig)?

if I add test: 'fonts.css' it will be copied as asset and complied with style-loader

[alexander-akait]

@budarin Тяжело понять что именно Вы желаете, возможно на нативной языке это будет проще. Спасибо!

[budarin]

Отлично! )

все .css файлы в проекте обрабатываются style-loader и встраиваются в результирующий код. Но у нас есть отдельный fonts.css, который необходимо браузеру загружать как отдельный ресурс Если в конфиге webpack я попытаюсь отдельно его грузить при помощи file-loader при помощи test: /fonts.css$/ - он будет обработан еще и style-loader по правилу test: /\.css$/ - чего хотклось бы избежать

[alexander-akait]

Вы можете использовать test: /fonts.css$/, также хотелось бы узнать откуда береться fonts.css, копируется при помощи CopyWebpackPlugin или собирается? Возможно вы имеете ввиду это поведение https://github.com/webpack-contrib/style-loader#url, просто используйте test: /fonts.css$/.

[budarin]

Мочь то я могу test: /fonts.css$/ но и style-loader может - и код fonts.css будет помещен в общий скрипт - чего абсолютно не нужно

fonts.css - создается руками из другого ресурса

CopyWebpackPlugin - копирует файлы без задания им имени в формате [name].[hash].[ext]

[alexander-akait]

@budarin Для доставания css из js банда используйте https://github.com/webpack-contrib/mini-css-extract-plugin (splitChunks.cacheGroups позволяет достать любой модуль по имени в свой собственный js bundle и плагин extract plugin уже достанет css из js бандла).

Также вы можете сделать [name].[hash].[ext] с помощью CopyWebpackPlugin https://github.com/webpack-contrib/copy-webpack-plugin#template.

Выбор решения зависит от такого как вы формируете файл, если средставми сборки webpack то первое решения для Вас, если это просто файл который откуда то копируется то стоит использовать второе решение.

[budarin]

спасибо за помощь - 2е решение меня вполне устроит!

PS: где-то было раньше описание require('!!file.....') синтаксиса для загрузки файлов при помощи лоадеров - нигде не нашел - оно могло бы избавить меня от CopyWebpackPlugin

[budarin]

Упс!

CopyWebpackPlugin не добавляет ресурс в assets-manifest.json ((( - не решает проблему

[alexander-akait]

@budarin Возможно вы имеете ввиду это https://github.com/webpack/docs/wiki/loaders#loader-order. Проблема с манифестами уже в работе. Все что нам не дает решить ее, разница в api манифест плагинов, но мы работает над ней.

[budarin]

не понял про loader order - если речь идет о том, что срабатывает только тот лоадер, который 1й понял по test что это его ресур и обработал его а остальные лоадеры его уже не тестируют - возможно это решит вопрос

Про манифетс - планируется что CopyWebpackPlugin будет добавлять ресурсы в assets-manifest.json ?

[alexander-akait]

@budarin Попробуейте require("!!file-loader!./fonts.css")

Да CopyWebpackPlugin будет в будущем добавлять файлы в манифесты (или реализует api для этой возможности).

[budarin]

"file-loader": "^1.1.11",

babel config:

{
    presets: [
        'react',
        [
            'env',
            {
                modules: false,
                useBuiltIns: true,
                debug: true,
                // будет браться из package.json в версии 1.7 и старше
                targets: {
                    browsers: browserlist,
                },
            },
        ],
    ],
    plugins: [
        'external-helpers',
        'syntax-dynamic-import',
        'transform-class-properties',
        'syntax-trailing-function-commas',
        ['transform-object-rest-spread', { useBuiltIns: true }],
        [
            'lodash',
            {
                id: ['lodash', 'recompose'],
            },
        ],
    ],
    env: {
        development: {
            plugins: ['transform-react-jsx-self', 'transform-react-jsx-source', 'runtyper'],
        },
        production: {
            plugins: [
                'jsx-remove-data-test-id',
                'transform-flow-strip-types',
                'transform-react-inline-elements',
                'transform-react-remove-prop-types',
                'transform-react-constant-elements',
                'transform-remove-console',
                'transform-remove-debugger',
            ],
        },
    },
}

[alexander-akait]

@budarin ошибки eslint/import ожидаемы, нужно воспользоваться конфигурация которая описана здесь https://github.com/benmosher/eslint-plugin-import#resolvers, просто попробуйте собраться проект и убедиться что все работает как ожидается, если вы используете eslint-loader, просто выключите его временно для тестирования

[budarin]

я отключил ESLint на проекте и все прошло успешно:

require('!!file-loader?name=[name].[hash].[ext]!../common/assets/css/fonts.css'); 

fonst.css был добавлен в assets-manifest.json

только из приведенной ссылки совсем не понятно как настроить resolver чтобы он мог понять синтаксис !!file-loader!

[alexander-akait]

@budarin Я бы с удовльствием помог, но в данный момент нас двое на все webpack-contrib репозитории, у меня просто нет времени чтобы разбираться в этом, думаю вы можете попросить улучшить readme для более простого восприятия, или посмотреть на тестовые примеры или чужие конфигурации.

[budarin]

Спасибо большое за помощь!!