Использование NPM для файлов CSS в проекте Node

Обычно, когда я создаю веб-страницу, я включаю некоторую библиотеку, такую ​​как начальная загрузка из CDN. Теперь я хочу автономную веб-страницу (на самом деле я использую электрон... но то же самое) в среде Node. Я выбрал Pure в качестве основы.

Итак, у меня есть проект Node с установленным электроном, и теперь я

npm install purecss --save

который устанавливает purecss в node_modules, Это говорит, чтобы использовать require('yahoocss') чтобы загрузить файлы, но как я должен сервер файлы сборки (pure.min.css) на моих страницах HTML?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    </head>
    <body>
    </body>
</html>

Я имею в виду... я должен поставить ссылку на таблицу стилей, которая указывает на node_modules? Это кажется.. неправильно.

Источник

1 ответ

Вам нужно использовать что-то вроде Webpack. Это позволит вам использовать статические модули NPM, такие как Pure, импортируя их в отдельный файл JS, который используется только Webpack. Webpack читает этот файл и в зависимости от типа импортируемого модуля выбирает соответствующий загрузчик. Этот загрузчик выполнит различные типы изменений для импортированных файлов и после завершения экспортирует выходные данные в новые статические файлы, которые затем можно будет включить в ваш HTML-документ.

Пожалуйста, посмотрите на документацию Webpack, а также посмотрите этот список доступных загрузчиков.

Источник

Я не верю, что это лучший ответ, но я хочу, чтобы сторонние библиотеки были отделены от моего кода.

(Я следую принципу, что мой CSS/JS будет меняться по графику, отличному от графика сторонних библиотек. Обычно мой код будет меняться чаще, поэтому я считаю, что в моих интересах, чтобы сторонний код отдельно от моего CSS, а также не встроен в HTML.)

Поскольку я использую webpack для компиляции и объединения файлов TypeScript, я использую плагин, чтобы получить копию файла Pure CSS и поместить ее в нужный каталог.

Вам по крайней мере понадобится npm install --save-dev webpack copy-webpack-plugin (помимо уже выполненных npm install purecss).

В webpack.config.js вы можете вставить copy-webpack-plugin (const CopyWebpackPlugin = require('copy-webpack-plugin');), а затем в конфигурации попросите его получить копию файла (ов) CSS, который вы хотите из пакета:

       /* ... */
plugins: [
    /* ... */
    new CopyWebpackPlugin({
        patterns: [
            /* ... */
            {
                from: './node_modules/purecss/build/pure-min.css',
                to: 'lib'
            },
            /* ... */
        ]
    })
    /* ... */
],
/* ... */

Это скопирует этот файл в lib каталог.

Затем вы можете включить файл в свои HTML-файлы:

       <link rel="stylesheet" href="./lib/pure-min.css" />

Опять же, не уверен, что это лучший способ, но он работал у меня, когда я хотел скопировать определенный файл из node_modules в свой сгенерированный каталог.

Источник
Другие вопросы по тегам