玩phpBB3,自行編繹SASS

採用 Laravel-mix 簡易地組合編繹 css 和 javascript

用於自行開發 bootstrap 風格時的作法

先初始化
```
 npm init
```

加入需要的套件

 npm install laravel-mix --save-dev
 npm install bootstrap font-awesome jquery popper.js axios startbootstrap-sb-admin-2

自 node_modules/laravel-mix/setup/webpack.mix.js 複製到 phpBB3 根目錄, 並編輯之,如下

 let mix = require('laravel-mix');

 mix.js('src/js/app.js', 'assets/javascript')
   .sass('src/sass/app.scss', 'assets/css')
   .sass('src/sass/landing-page.scss', 'assets/css')
   .styles('src/css/backend.css', 'assets/css/backend.css')
   .copy('node_modules/startbootstrap-landing-page/img', './img')
   .setPublicPath('/');

package.json 需加入

 "scripts": {
   "dev": "npm run development",
   "development": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
   "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
   "watch-poll": "npm run watch -- --watch-poll",
   "hot": "NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
   "prod": "npm run production",
   "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
 },

建目錄 src/ 下有子目錄 css/ 和 js/ 和 sass/
重點在 js/app.js
```
 require('./bootstrap');
```

重點在 js/bootstrap.js

 window._ = require('lodash');
 try {
     window.Popper = require('popper.js').default;
     window.$ = window.jQuery = require('jquery');

     require('bootstrap');
 } catch (e) {}

 window.axios = require('axios');
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

重點在 sass/app.scss

 // Fonts
 @import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
 @import "./variables";
 // Bootstrap
 @import "~bootstrap/scss/bootstrap";
 @import "~font-awesome/scss/font-awesome.scss";
 @import "../css/notosanstc.css";
 @import "~startbootstrap-sb-admin-2/scss/sb-admin-2"

最終編繹 src 下的套件至 assets/ 目錄下(font-awesome 會在根目錄下的 font 資料夾)，開發中版本
```
 npm run dev 
```
或 production版本
```
 npm run prod 
```