前言
在前端开发中，css 框架是一个重要的工具，bulma 作为相对较新的 css 框架，其提供了十分强大的样式库，但是却要求开发者自己实现大量的组件，这对于初学者来说有一定的困难性，于是我们就需要借助 npm 包，如 bulma-scss-components，来加速组件的开发。
什么是 bulma-scss-components
bulma-scss-components 是一个基于 Sass 重构的 web 组件库，包括了百余个组件，支持对 Bulma 框架的样式进行独立调整，其主要特点包括：
- 针对 Bulma 框架的样式重构
- 支持 sass 变量
- 提供了更加易用的组件
如何使用 bulma-scss-components
- 安装
npm install bulma-scss-components
- 配置 webpack
在 webpack 中配置 sass-loader ，使其识别 node_modules 中的 scss 文件。
{
test: /\.[s]?css$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: [
path.resolve(__dirname, 'node_modules/bulma-scss-components')
]
}- 引入变量和样式
在 sass 中引入 bulma 变量和样式文件，并在文件中引入需要使用的 scss 文件。
-- -------------------- ---- ------- -- -- ----- -- ------- ----------------------------- ------- ------------------------ ------- ------------------------ ------- ---------------------------- ------- ------------------------------ ------- ----------------------------------------------- -- --------- ------- ------------------------------------------------ ------- ---------------------------------------------------
- 使用组件
使用时直接在 html 文件中引用组件即可。
-- -------------------- ---- -------
------
---- -----------------
---- -------------------------
------- -------------- -------------------- ------------------------------
-------------- -------------
----- ----------- ----------
-- ---------- -------------- -----------------------
-------
---------
------
---- --------------------- ------------------ ------------
---- -------------------------
-- -------- ------------------------------ --------
-- -------- --------------------------- -------- --------
-- -------- ---------------------------- -------- --------
-- -------- -------------------- ----------------- -------- --------
-- -------- --------------------------- -------- --------
------
------
------
-------总结
bulma-scss-components 是一个优秀的 css 组件库，它的优点在于针对 Bulma 框架进行重构，并支持 sass 变量，更具有可复用性和扩展性，使用起来也相对方便。我们可以用它提供的组件快速搭建起页面来，节约时间和开发成本，同时也提高了页面的美观性和用户体验.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ae381e8991b448d8895