使用 webpack(With webpack)

Use Bulma with webpack

1. 创建package.json文件 #

打开终端, 创建一个新的目录 mybulma, 切换到这个目录, 然后输入如下命令: 

npm init

这将启动交互模式来创建package.json文件。当提示符提示您进行输入时，输入webpack.config.js即可。

2. 安装依赖项 #

安装构建CSS所需的包: 

npm install bulma --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install mini-css-extract-plugin --save-dev
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-dev

package.json的内容应该如下. 

{
  "name": "mybulma",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "license": "MIT",
  "devDependencies": {
    "bulma": "^0.8.0",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}

3. 创建 webpack config (Webpack <= 3) #

创建 webpack.config.js 文件: 

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          'css-loader',
          'sass-loader'
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/mystyles.css'),
  ]
};

这个设置中使用src文件夹作为输入，dist文件夹作为输出

3.5. 创建 webpack config (Webpack 4) #

创建 webpack.config.js 文件: 

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              // options...
            }
          }
        ]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/mystyles.css'
    }),
  ]
};

这个设置中使用src文件夹作为输入，dist文件夹作为输出

4. 创建 src 目录 #

创建 src 目录， 并在该目录系创建 index.js 文件，并输入如下内容: 

require('./mystyles.scss');

5. 创建 Sass 文件 #

在 src 目录下, 添加 mystyles.scss文件: 

@charset "utf-8";
@import "~bulma/bulma";

请确保 bulma.sass 文件的正确路径.

6. 创建 dist folder #

Create a dist folder in which you add a css folder, and a js folder. Leave these last two folders empty. Their content will be generated by the webpack build.

7. 创建 HTML 页面 #

创建一个使用了Bulma组件的HTML模板。 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My custom Bulma website</title>
    <link rel="stylesheet" href="css/mystyles.css">
  </head>
  <body>
     <h1 class="title">
        Bulma
      </h1>

      <p class="subtitle">
        Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
      </p>

      <div class="field">
        <div class="control">
          <input class="input" type="text" placeholder="Input">
        </div>
      </div>

      <div class="field">
        <p class="control">
          <span class="select">
            <select>
              <option>Select dropdown</option>
            </select>
          </span>
        </p>
      </div>

      <div class="buttons">
        <a class="button is-primary">Primary</a>
        <a class="button is-link">Link</a>
      </div>
  </body>
</html>

在目的 文件夹中保存文件为 mypage.html.

请注意css/mystyles.css 的路径。这将是我们将使用Sass生成的CSS文件的位置。

在浏览器中打开页面:

Bulma unstyled
无样式页面

8. 添加构建的node scripts #

在 package.json文件中, 添加如下代码: 

"scripts": {
  "build": "webpack --mode production"
},

想要测试它, 打开终端并输入如下命令: 

npm run build

9. 添加你的自定义样式 #

用下面的代码替换mystyles.scss文件中的内容: 

@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";

Rebuild the CSS to see the result:

Bulma customized
Bulma 自定义样式

Good! 您已经成功安装和自定义Bulma.