【前言】

推荐一个网站：Find the best package for you and test it online, Analyze tech stack for your project. | DEVTOOL.TECH

这里可以看到npm包各种信息，

比如按npm包star数排行，下载数排行，以及npm包详细信息等

npm包详情内，有很多聚合的信息

这个网站比较有意思，可以看到目前流行的npm包是哪些

【bulma】

流行npm包（star排行）中，css类前三：bootstrap（老牌大哥），element-ui，bulma，

Bulma: Free, open source, and modern CSS framework based on Flexbox

对于bulma最早的介绍：

CSS 框架 Bulma 教程 - 阮一峰的网络日志

bootstrap，bulma，tailwindcss对比，也可以搜一些国内的文章：

Bulma vs. Tailwind CSS: Bootstrap alternatives - LogRocket Blog

【安装】

由于bulma只是一个css文件，所以安装方式比较多，

1.直接通过cdn引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

2.github下载后引入

https://github.com/jgthms/bulma/releases/download/0.9.4/bulma-0.9.4.zip

3.npm安装

npm install bulma

【配置】

这里说下webpack+sass下的配置

1.配置sass-loader，

详见：webpack随笔03-sass_uikoo9的博客-CSDN博客_sass webpack

      {test: /\.(scss|sass)$/i,use: ["style-loader","css-loader","sass-loader",],},

2.配置cacheGroup

在生产环境下可以将bulma单独抽出来

  bulma: {test: /[\\/]node_modules[\\/]bulma[\\/]/,name: 'bulma',chunks: 'all',priority: -3,reuseExistingChunk: true,},

抽取出来后，可以看到没有gzip的bulma有200k大小

【使用】

1.scss中引入

sass|scss中可以引入bulma的css文件

@import 'bulma/css/bulma.css';

2.jsx中引入

在js｜jsx中可以引入bulma的sass文件

// bulma
import 'bulma/bulma.sass';

3.按bulma文档使用

比如添加一个button

<button class="button">Button</button>

效果如下

webpack随笔06-bulma相关推荐

webpack随笔04-webpack5压缩jscss
[前言] webpack5的压缩大致和webpack4相似,稍微有一些不同 [不压缩css] dev模式下不需要压缩css,且讲css以style的形式注入到html即可 rules: [{test: ...
抗变态或亲变态是更好的解决方案
重点 (Top highlight) Neumorphism is undoubtedly one of the hottest design trends in 2020. It has attra ...
笔记随笔1(webpack,vue-router,vuex)
笔记随笔1 props ; $emit ; :value= XX ; Vue event.target.value( ) ; slot name slot 具名插槽 <template slot ...
一周随笔--15.10.06
一周新知识点记录(15.10.06) 一.UIWindow的windowLevel (优先级) 我们在程序中获取通过[UIApplication sharedApplication].keyWindo ...
Webpack 4 api 了解与使用
webpack 最近升级到了 v4.5+版 01 官方不再支持 node4 以下版本官方不再支持 node4 以下版本官方不再支持 node4 以下的版本,所以如果你的node版本太低,先开始升级n ...
利用webpack和vue实现组件化
原文链接:http://mrzhang123.github.io/2016/06/02/webpack-vue-3/ 本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vu ...
打包成单独的HTML文件,【WEBPACK】分离css单独打包
时间:2018-11-21 00:58:56 这篇文章非常非常早了,webpack4下已经无法用了, 最新可以看这里webpack实战场景系列 CHANGELOG 2018-02-08 14:46:0 ...
随笔汇总_索取资料请进入
索要资料请加: 工控PLC.HMI资料QQ:2915067885 ( 昵称:volcanol ) || Windows编程资料QQ : 3411522598 (昵称: WinDel ...
随笔：写给我深爱的球队
我为科比呐喊,只是因为我深爱篮球. 我为马刺流泪,才是因为我深爱这支球队. 哎!还有二十多天就要离开这个呆了六年的校园了,或许也要离开这个繁华喧嚣而又充满人情故事的城市 ...
vue打包的app如何设置自动清理软件缓存_使用Webpack启动你的Vue.js应用
Webpack是开发Vue.js单页面应用(SPA)最基本的工具.通过管理负责的构建步骤能够使开发工作流非常的简单,同时也能够优化应用的大小提升应用的性能. 在这篇文章我将为大家展示Webpack是如 ...

webpack随笔06-bulma