es-style ·
说明
es-style
是基于postcss
的转译功能,同时服务于react
项目,它是针对服务端渲染时的静态资源处理方案,同时也适用于单页面应用
⚠️ es-style@2.0.0+
版本基于webpack4
目前服务网站喜马拉雅 FM
体验
npm install
npm run ssr
or
npm run spa
安装
npm install es-style --save
or
yarn add es-style
webpack - 开发
babel 配置
开发环境需配合 express 来搭建服务,具体配置参考examples/spa/server/index.js
如果不配置的话,会导致图片资源访问不了
const ExpressWatch = ;const webpack = ;const webpackConfig = ;const app = ;const compiler = ;
webpack - 发布
babel 配置
☝️ 建议
发布的时候[position]使用外联(external),开发的时候使用内联(inline)
发布的时候[fileSystem]使用文本文件(file),开发的时候使用内存文件(memory)
⚠️ ️ 注意
发布的时候,path和publicPath的配置和webpack的output里面的配置项一致
css导出到文件中的目录是根据path来的,在path根目录下,文件名称是main.css
🍡 雪碧图
如果需要雪碧图,那么在当前css文件的头部添加如下注释,则该css文件中的所有图片将集成到一张大图上
不支持svg合并,由于svg-sprite使用到PhantomJS,文件较大,去掉了
如果需要,可以在项目中自行开发 🙂
/*sprite*/
💀 报错处理
如果是在启动服务时报错,这个时候修改好错误是没有办法继续运行服务,需要同时保存下引用该样式的js文件,这很重要,否则需要重启服务,浪费时间
如果服务以及运行,这个时候报错,只需修改错误,服务即可自动实现热更新
项目引用
//组件内生效 改变即触发热更新import './style/es-style.scss'; //全局生效(!) 改变需刷新浏览器才能看到变化import './style/common.scss!'; //可以使用<es-style/>来定位css的存放位置 <div> <es /> </div>;//如果没有es-style标签,那么会按JSXElement从上往下按就近原则存放css的资源组件//指定es-style标签,就是指定当前js引用的样式资源存放的位置,这里的存放不是<style>这种形式,而是将解析后的样式已props形式进行存放
配置文件 .es-style
在项目根目录创建.es-style
文件,配置内容如下
plugins
表示postcss
插件,⚠️ 下面两个插件暂时不要使用 cssnano
和 postcss-modules
因为 es-style 已经实现这样的功能,还有雪碧图已经内置了postcss-sprites
和autoprefixer
插件,可用对其进行参数配置
如果有报错,请 ISSUE
注意
-
引用
scss
需保证当前引用的 js 文件内存在JSXElement
,否则会解析不到 -
目前对于全局的
scss
无法做到去重,因为 babel 解析是根据一个个文件做的,所以尽量只引用一份全局的样式文件 -
开发环境不推荐使用
happypack
插件来编译,会导致图片资源丢失,由于使用的是内存文件系统,使用它会导致在每个打开的线程中创建文件,产生不可控的影响 -
.gitignore
添加上面配置文件的.es-sprites
,忽略雪碧图生成的图片,默认是.es-sprites
-
配置文件
.es-style
中的 plugin,执行顺序从上往下,重复的 plugin 会被忽略
,一直执行到最后
License
MIT