Initial project

5 months ago · 90f0360be5
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,11 @@
 >= 1%
 last 1 major version
 not dead
 Chrome >= 45
 Firefox >= 38
 Edge >= 12
 Explorer >= 10
 iOS >= 9
 Safari >= 9
 Android >= 4.4
 Opera >= 30
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,38 @@
 .sass-cache/
 *.css.map
 *.sass.map
 *.scss.map

 .DS_Store
 node_modules
 /dist


 # local env files
 .env.local
 .env.*.local

 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*

 # Editor directories and files
 .idea
 # .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?

 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
 *.code-workspace

 # Local History for Visual Studio Code
 .history/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,23 @@
 {
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/src/css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "/dist/style"
        }
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ]
 }
--- a/css/style.css
+++ b/css/style.css
--- a/package.json
+++ b/package.json
@ -0,0 +1,20 @@
 {
  "scripts": {
    "compile:sass": "node-sass src/scss/custom.scss css/style.css",
    "build": "webpack --mode development"
  },
  "dependencies": {
    "bootstrap": "^4.5.3"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.4",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "node-sass": "^5.0.0",
    "postcss-loader": "^4.1.0",
    "sass-loader": "^10.1.0",
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0"
  }
 }
--- a/src/css/custom.css
+++ b/src/css/custom.css
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/custom.css">
 </head>

 <body>
  <div class="container">
    <h1 class="text-primary">Hello</h1>
    <h2 class="text-success">World</h2>

    <button class="btn btn-primary">Test</button>
  </div>

 </body>

 </html>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1 @@
 import './scss/all.scss';
--- a/src/scss/_all.scss
+++ b/src/scss/_all.scss
@ -0,0 +1,17 @@
@import "./helpers/variables"; // 使用本地檔案

 /* --- Required (使用模塊解析) --- */
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

 /* --- Bootstrap 主檔案 (使用模塊解析) --- */
@import "~bootstrap/scss/bootstrap";

 // @import "~bootstrap/scss/root";
 // @import "~bootstrap/scss/reboot";
 // @import "~bootstrap/scss/type";
 // @import "~bootstrap/scss/images";
 // @import "~bootstrap/scss/grid";
 // @import "~bootstrap/scss/buttons";
 // @import "~bootstrap/scss/card";
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@ -0,0 +1,17 @@
@import "./helpers/variables"; // 使用本地檔案

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

 // @import "../../node_modules/bootstrap/scss/bootstrap";

@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
 // @import "../../node_modules/bootstrap/scss/type";
 // @import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/grid";

 // Components
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/card";
--- a/src/scss/helpers/_variables.scss
+++ b/src/scss/helpers/_variables.scss
@ -0,0 +1,6 @@

 $primary: #5e72e4; // 隨意修改變數
 $success: #2dce89;



--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,35 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',
  },
  resolve: {
    modules: ['node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
  ],
 };
--- a/yarn.lock
+++ b/yarn.lock