1

通常当我构建一个网页时，我会包含一些库，比如来自 CDN 的引导程序。现在我想要一个节点环境中的离线网页（实际上我正在使用电子......但同样的东西）。我选择Pure作为我的框架。

所以我安装了电子的节点项目，现在我

npm install purecss --save

安装purecss到node_modules. 它说用于require('yahoocss')加载文件，但我应该如何在我的 HTML 页面上提供构建文件（pure.min.css）？

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

我的意思是..我是否放置了指向 node_modules 的样式表链接？这似乎..错了。

4

2 回答 2

0

我不相信这是最好的答案，但我想要的是能够将第三方库与我的代码分开。

（我遵循的原则是我的 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 复制到生成的目录中时，它对我来说效果很好。

于 2020-09-20T20:53:11.620 回答
0

你需要使用类似Webpack的东西。这将允许你使用像 Pure 这样的静态 NPM 模块，方法是将它们导入到一个单独的 JS 文件中，该文件只被 Webpack 使用。Webpack 读取此文件并根据您要导入的模块类型选择适当的加载器。此加载器将对导入的文件执行不同类型的修改，一旦完成，会将输出导出到新的静态文件，然后您可以将其包含在您的 html 文档中。

请去看看 Webpack 的文档并查看这个可用加载器列表。

于 2018-07-13T07:43:11.207 回答