{"id":15363286,"url":"https://github.com/topthinking/es-style","last_synced_at":"2025-06-18T18:40:57.620Z","repository":{"id":57227012,"uuid":"119984223","full_name":"Topthinking/es-style","owner":"Topthinking","description":" 📦🔥easy stylesheet style","archived":false,"fork":false,"pushed_at":"2020-09-04T00:46:51.000Z","size":4769,"stargazers_count":4,"open_issues_count":3,"forks_count":1,"subscribers_count":0,"default_branch":"v2","last_synced_at":"2025-04-14T09:53:46.593Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Topthinking.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-02T13:21:40.000Z","updated_at":"2019-09-25T07:53:25.000Z","dependencies_parsed_at":"2022-09-04T16:01:49.119Z","dependency_job_id":null,"html_url":"https://github.com/Topthinking/es-style","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Topthinking%2Fes-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Topthinking%2Fes-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Topthinking%2Fes-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Topthinking%2Fes-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Topthinking","download_url":"https://codeload.github.com/Topthinking/es-style/tar.gz/refs/heads/v2","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249041670,"owners_count":21203143,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T13:05:14.427Z","updated_at":"2025-04-15T09:26:06.442Z","avatar_url":"https://github.com/Topthinking.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# es-style \u0026middot; [![NPM version](https://img.shields.io/npm/v/es-style.svg)](https://www.npmjs.com/package/es-style)\n\n## 说明\n\n`es-style`是基于`postcss`的转译功能，同时服务于`react`项目，它是针对服务端渲染时的静态资源处理方案，同时也适用于单页面应用\n\n⚠️ `es-style@2.0.0+`版本基于`webpack4`\n\n**目前服务网站[喜马拉雅 FM](https://www.ximalaya.com/)**\n\n## 体验\n\n```shell\nnpm install\n```\n\n```shell\nnpm run ssr\n```\n\nor\n\n```shell\nnpm run spa\n```\n\n## 安装\n\n```shell\nnpm install es-style --save\n```\n\nor\n\n```shell\nyarn add es-style\n```\n\n## webpack - 开发\n\nbabel 配置\n\n```json\n{\n  \"plugins\": [\n    \"es-style/babel\",\n    {\n      \"type\": \"attribute\", //默认是 `class`， 当前配置样式选择器是元素属性\n      \"imageOptions\": {\n        \"path\": \"images/\", //图片资源存放的目录\n        \"limit\": 5000\n      }\n    }\n  ]\n}\n```\n\n开发环境需配合 express 来搭建服务，具体配置参考`examples/spa/server/index.js`\n\n如果不配置的话，会导致图片资源访问不了\n\n```js\nconst { ExpressWatch } = require('es-style/watch');\nconst webpack = require('webpack');\nconst webpackConfig = require('./webpack.dev.config');\nconst app = express();\nconst compiler = ExpressWatch(webpack(webpackConfig), app, () =\u003e {\n  //compiler.plugin('done',callback)\n  //这里主要编写上面钩子方法的回调实现，因为watch方法中集成了done的使用，防止出现冲突\n});\n```\n\n## webpack - 发布\n\n#### babel 配置\n\n```json\n{\n  \"plugins\": [\n    \"es-style/babel\",\n    {\n      \"type\": \"attribute\", //默认是 `class`， 当前配置样式选择器是元素属性\n      \"position\": \"external\", //样式存放位置，inline内联（head头中），external外联（文件中），默认内联\n      \"write\": true, //当前编译过程是否写文件(图片资源和css资源），原因是编译node端代码不需要写静态资源文件，加快编译过程,默认是true可写\n      \"publicPath\": \"/\", //公共资源前缀，一般用来设置cdn地址\n      \"fileSystem\": \"file\", //资源存放文件类型，默认存放在内存中（memory），如果指定file，那么就存放到指定目录的硬盘上\n      \"path\": \"./dist\", //资源存放的路径目录\n      \"imageOptions\": {\n        \"path\": \"images/\", //图片资源存放的目录\n        \"limit\": 5000\n      },\n      \"fontOptions\": {\n        \"path\": \"fonts/\" //字体资源存放的目录\n      }\n    }\n  ]\n}\n```\n\n#### ☝️ 建议\n\n    发布的时候[position]使用外联(external)，开发的时候使用内联(inline)\n\n    发布的时候[fileSystem]使用文本文件(file)，开发的时候使用内存文件(memory)\n\n#### ⚠️ ️ 注意\n\n    发布的时候，path和publicPath的配置和webpack的output里面的配置项一致\n\n    css导出到文件中的目录是根据path来的，在path根目录下，文件名称是main.css\n\n#### 🍡 雪碧图\n\n    如果需要雪碧图，那么在当前css文件的头部添加如下注释，则该css文件中的所有图片将集成到一张大图上\n\n    不支持svg合并，由于svg-sprite使用到PhantomJS，文件较大，去掉了\n\n    如果需要，可以在项目中自行开发 🙂\n\n```css\n/*sprite*/\n```\n\n#### 💀 报错处理\n\n    如果是在启动服务时报错，这个时候修改好错误是没有办法继续运行服务，需要同时保存下引用该样式的js文件，这很重要，否则需要重启服务，浪费时间\n\n    如果服务以及运行，这个时候报错，只需修改错误，服务即可自动实现热更新\n\n## 项目引用\n\n```jsx\n//组件内生效 改变即触发热更新\nimport './style/es-style.scss';\n\n//全局生效(!) 改变需刷新浏览器才能看到变化\nimport './style/common.scss!';\n\n//可以使用\u003ces-style/\u003e来定位css的存放位置\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003ces-style /\u003e\n  \u003c/div\u003e\n);\n//如果没有es-style标签，那么会按JSXElement从上往下按就近原则存放css的资源组件\n//指定es-style标签，就是指定当前js引用的样式资源存放的位置，这里的存放不是\u003cstyle\u003e这种形式，而是将解析后的样式已props形式进行存放\n```\n\n## 配置文件 .es-style\n\n在项目根目录创建`.es-style`文件，配置内容如下\n\n`plugins` 表示`postcss`插件，⚠️ 下面两个插件暂时不要使用 `cssnano` 和 `postcss-modules`\n\n因为 es-style 已经实现这样的功能，还有雪碧图已经内置了`postcss-sprites`和`autoprefixer`插件，可用对其进行参数配置\n\n如果有报错，请 ISSUE\n\n```json\n{\n  \"plugins\": [\n    [\n      \"postcss-sprites\",\n      {\n        \"spritePath\": \".es-sprites\"\n      }\n    ],\n    [\n      \"autoprefixer\",\n      {\n        \"browsers\": \"last 4 version\"\n      }\n    ],\n    [\"postcss-plugin-px2rem\", {}]\n  ],\n  \"limit\": 50 //允许 \u003c=50 字节的图片文件转换成base64\n}\n```\n\n## 注意\n\n1.  引用`scss`需保证当前引用的 js 文件内存在`JSXElement`，否则会解析不到\n\n2.  目前对于全局的`scss`无法做到去重，因为 babel 解析是根据一个个文件做的，所以尽量只引用一份全局的样式文件\n\n3.  开发环境不推荐使用`happypack`插件来编译,会导致图片资源丢失,由于使用的是内存文件系统，使用它会导致在每个打开的线程中创建文件，产生不可控的影响\n\n4.  `.gitignore`添加上面配置文件的`.es-sprites`，忽略雪碧图生成的图片，默认是`.es-sprites`\n\n5.  配置文件`.es-style`中的 plugin，执行顺序从上往下，重复的 plugin 会被`忽略`，一直执行到最后\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopthinking%2Fes-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftopthinking%2Fes-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopthinking%2Fes-style/lists"}