LoginSignup
0

More than 3 years have passed since last update.

webpackでBulmaを使いたい

Posted at

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

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

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>

bulma.png

djangoで動かすなら

こちらもご覧ください

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0