symfony3.3でカスタマイズしたbootstrapを使う #Bootstrap

プロジェクトを作る

symfonyコマンドで新しいプロジェクトを作る

$ symfony new foo

nodeインストールする

centos7.2ぐらいではこんな感じ

$ sudo yum install -y gcc-c++ make
$ curl -sL https://rpm.nodesource.com/setup_6.x | sudo bash -
$ sudo yum install -y nodejs

yarn インストールする

npmでyarnをインストールする

$ sudo npm install -g yarn

プロジェクトにpackage.jsonを作る

こんな感じで。

foo/package.json

{
  "name": "sample1",
  "version": "1.0.0",
  "description": "sample1 =======",
  "main": "webpack.config.js",
  "directories": {
    "test": "tests"
  },
  "dependencies": {
  },
  "devDependencies": {
      "@symfony/webpack-encore": "^0.9.1",
    "bootstrap-sass": "^3.3.7",
    "eonasdan-bootstrap-datetimepicker": "^4.17.47",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.5"

  },
  "scripts": {
    "dev-server": "./node_modules/.bin/encore dev-server",
    "dev": "./node_modules/.bin/encore dev",
    "watch": "./node_modules/.bin/encore dev --watch",
    "build": "./node_modules/.bin/encore production"
  },
  "author": "",
  "license": "ISC"
}

webpack-encore ,bootstrap-sass, node-sass,sass-loaderは必須。

webpack.config.jsを作る

foo.webpack.config.js

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // directory where all compiled assets will be stored
    .setOutputPath('web/build/')

    // what's the public path to this directory (relative to your project's document root dir)
    .setPublicPath('/build')

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // will output as web/build/app.js
    .addEntry('js/app', './app/Resources/assets/js/main.js')

    // will output as web/build/global.css
    .addStyleEntry('css/global', './app/Resources/assets/css/global.scss')

    // allow sass/scss files to be processed
    .enableSassLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

main.jsを作る

foo/app/Resources/assets/js/main.js を作成する。

global.scssとカスタマイズ用の_variables.scssを作る

global.scssが_variables.scssとnode-module内のbootstrap.scssをimportするようにする。

foo/app/Resources/assets/css/global.scss

$web-font-path: 'data:text/css;base64,';

@import "_variables.scss";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

_variables.scss はbootstrapの変数を適当にサイトデザインに沿って修正、追加する。
例えば

foo/app/Resources/assets/css/_variables.scss

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #88ff88 !default;
$brand-info:            #8888ff !default;
$brand-warning:         #ffff88 !default;
$brand-danger:          #ff0000 !default;

この例は極端だけれど。

yarnでトランスパイル

$ yarn run encore dev

これで foo/web/build/css と foo/web/build/js にトランスパイルされたcssとjsが出来上がる。

linkタグを書く

レイアウトファイルのスタイルシートリンクを書き換える

foo/app/Resources/views/base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        {% block stylesheets %}
            {% stylesheets 'build/css/*' filter='cssrewrite' %}
                <link rel="stylesheet" href="{{ asset_url }}" />
            {% endstylesheets %}
        {% endblock %}

    </head>
    <body>
        <div class="container">
        {% block body %}{% endblock %}
        </div>
        {% block javascripts %}
            <script src="{{ asset('build/js/app.js') }}"></script>
        {% endblock %}
    </body>
</html>

ほら、変わった。