Node项目中通过NPM引入Pure CSS的离线使用方案咨询

嗨，我来帮你搞定这个Electron里用PureCSS的问题～ 你已经通过npm安装了Pure，但不想直接在HTML里硬指向node_modules的路径，完全能理解，毕竟那样不够规范，而且打包的时候也容易出问题。下面给你几个靠谱的方案，按需选就行：

方案一：用打包工具（Webpack/Vite等）处理（推荐） #

如果你的Electron项目已经在用打包工具，这是最省心的方式：

• 直接在你的主入口JS文件里导入Pure的CSS：

import 'purecss/build/pure.min.css';

打包工具会自动把这个CSS文件处理到你的输出资源里，你只需要在HTML里引入打包后的JS（或者单独的CSS文件，看你的打包配置）就行，完全不用管node_modules的路径，离线运行也没问题。

方案二：不使用打包工具的原生处理方式 #

要是你没用到打包工具，也有两种干净的做法：

子方案1：复制静态资源到项目目录 #

手动把node_modules/purecss/build/pure.min.css复制到你项目里的静态资源文件夹（比如assets/css），然后在HTML里直接引用这个本地路径：

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

这种方式路径清晰，离线运行毫无压力，也避免了直接依赖node_modules的问题。

子方案2：用Node路径模块动态引入 #

利用Electron渲染进程可以访问Node API的特性（如果没开启contextIsolation的话），在JS里动态创建link标签：

const path = require('path');
const styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
// 用path拼接绝对路径，避免相对路径出错
styleLink.href = path.join(__dirname, 'node_modules', 'purecss', 'build', 'pure.min.css');
document.head.appendChild(styleLink);

这样不用手动复制文件，路径也不会出问题。

方案三：符合Electron安全规范的Preload脚本方式 #

如果你的项目开启了contextIsolation（Electron推荐的安全配置），直接在渲染进程用require会报错，这时候可以用preload脚本暴露路径：

1. 在preload.js里编写：

const { contextBridge, path } = require('electron');

contextBridge.exposeInMainWorld('appPaths', {
  getPureCssPath: () => path.join(__dirname, 'node_modules', 'purecss', 'build', 'pure.min.css')
});

2. 在HTML的脚本里动态引入：

const styleLink = document.createElement('link');
styleLink.rel = 'stylesheet';
styleLink.href = window.appPaths.getPureCssPath();
document.head.appendChild(styleLink);

这种方式既安全，又能正确获取到PureCSS的路径。

另外提一句，你看到的文档里require('yahoocss')应该是笔误，正确的是require('purecss')，不过这个只是在Node环境加载模块，并不会自动把CSS注入到HTML里，所以还是得用上面的方法来引入样式文件哦。

内容的提问来源于stack exchange，提问作者jozenbasin