webpackでBulmaを使いたい

9220 ワード
Bulma webpack webpack テキストリンク

公式に丁寧にまとめられていました

必要なローダー等のインストール

npm install --save-dev css-loader node-sass sass-loader style-loader

bulmaのインストール

npm install --save-dev　bulma

webpack.config.jsの編集

rulesはbootstrapのものが参考になりました。こちらもご参照ください

webpack.config.js

  entry: {
    use_bulma: './assets/scss/use_bulma.scss',
  },
...
        rules: [
      {
        test: /\.(scss)$/,
        use: [
        {
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
        }, {
          loader: 'postcss-loader',
          options: {
            plugins: function () {
              return [
                require('precss'),
                require('autoprefixer')
              ];
            }
          }
        }, {
          loader: 'sass-loader',
        },
        ]
      }
...

例

assets/scss/use_bulma.scss
@charset "utf-8";

@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 "~bulma/bulma";

<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>

djangoで動かすなら

こちらもご覧ください