با webpack

استفاده از Bulma با webpack


1. ایجاد یک فایلpackage.json #

در ترمینال خود ، یک پوشه جدید با نام mybulma ایجاد کنید، به آن مسیر بروید، سپس دستور زیر را تایپ کنید:

npm init

با این کار یک تنظیم تعاملی برای ایجاد package.json راه اندازی می شود. هنگامی که برای یک نقطه ورود درخواست شد، sass/mystyles.scss را وارد کنید.



2. نصب وابستگی های dev #

پکیج های مورد نیاز برای تجزیه و ساخت 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.7.2",
    "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 اختصاص داده اید.



6. ایجاد یک پوشه dist #

یک پوشه dist ایجاد کنید که پوشه css و js داشته باشد. این دو پوشه آخر را خالی بگذارید. این دو پوشه آخر را خالی بگذارید.



7. ایجاد یک صفحه HTML #

یک قالب HTML که از چندین کامپوننت Bulma استفاده شده است ایجاد کنید.

                                
<!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 برای stylesheet توجه کنید. این مسیر فایل CSS خواهد بود که با Sass تولید خواهیم کرد.

صفحه خود را در مرورگرتان باز کنید:

Bulma unstyled
صفحه بدون style


8. افزودن اسکریپت های node برای ایجاد بسته #

در package.json، کد زیر را اضافه کنید:


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

برای تست کردن وارد ترمینال خود شوید و دستور زیر را اجرا کنید:

npm run build


9. افزودن استایل های Bulma #

محتوای فایل 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";
                                    

CSS را Rebuild کنید تا نتیجه را ببینید:

Bulma customized
تم سفارشی Bulma

و! شما موفق به نصب و سفارشی سازی Bulma شده اید.