Browse Source

Initial project

try-argon
Bobson Lin 5 months ago
commit
90f0360be5
13 changed files with 12756 additions and 0 deletions
  1. +11
    -0
      .browserslistrc
  2. +38
    -0
      .gitignore
  3. +23
    -0
      .vscode/settings.json
  4. +7172
    -0
      css/style.css
  5. +20
    -0
      package.json
  6. +2588
    -0
      src/css/custom.css
  7. +21
    -0
      src/index.html
  8. +1
    -0
      src/main.js
  9. +17
    -0
      src/scss/_all.scss
  10. +17
    -0
      src/scss/custom.scss
  11. +6
    -0
      src/scss/helpers/_variables.scss
  12. +35
    -0
      webpack.config.js
  13. +2807
    -0
      yarn.lock

+ 11
- 0
.browserslistrc View File

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

+ 38
- 0
.gitignore View File

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

+ 23
- 0
.vscode/settings.json View File

@ -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"
]
}

+ 7172
- 0
css/style.css
File diff suppressed because it is too large
View File


+ 20
- 0
package.json View File

@ -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"
}
}

+ 2588
- 0
src/css/custom.css
File diff suppressed because it is too large
View File


+ 21
- 0
src/index.html View File

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

+ 1
- 0
src/main.js View File

@ -0,0 +1 @@
import './scss/all.scss';

+ 17
- 0
src/scss/_all.scss View File

@ -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";

+ 17
- 0
src/scss/custom.scss View File

@ -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";

+ 6
- 0
src/scss/helpers/_variables.scss View File

@ -0,0 +1,6 @@
$primary: #5e72e4; // 隨意修改變數
$success: #2dce89;

+ 35
- 0
webpack.config.js View File

@ -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',
}),
],
};

+ 2807
- 0
yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save