manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

Some CSS bundling with webpack.

Browse source
This commit is contained in:
Manuel Friedli 2019-05-08 00:01:54 +02:00
parent 4b64d4a793
commit f01d10b81d
23 changed files with 1893 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
css/uhr.css
View file

@ -14,7 +14,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@font-face {
font-family: 'Uhrenfont';
src: url('../resources/uhr.woff') format('woff');
src: url('../resources/assets/fonts/uhr.woff') format('woff');
}
body {
@ -206,7 +206,7 @@ body {
a.uhr-configlink {
cursor: pointer;
background: url("../resources/settings.png") no-repeat;
background: url("../resources/assets/images/settings.png") no-repeat;
width: 24px;
height: 24px;
display: inline-block;
@ -236,7 +236,7 @@ a.uhr-closecontrolpanel {
top: -1em;
width: 24px;
height: 24px;
background: url("../resources/close.png") no-repeat;
background: url("../resources/assets/images/close.png") no-repeat;
}
#disclaimer {

254
css/uhr.scss Normal file
View file

@ -0,0 +1,254 @@
/*!
* Copyright (C) Schweizerische Bundesbahnen SBB, 2019.
*/
/*
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@font-face {
font-family: 'Uhrenfont';
src: url('../resources/assets/fonts/uhr.woff') format('woff');
}
body {
font-family: 'Uhrenfont', sans-serif;
}
.uhr {
position: relative;
margin: 0;
transition: background-color 0.5s;
.reflection {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: radial-gradient(225em 45em at 160% 0, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%) no-repeat scroll;
display: block;
margin: 0.15em;
}
}
#themeswitcher {
}
.uhr .letterarea {
display: block;
position: absolute;
top: 12%;
bottom: 12%;
left: 12%;
right: 12%;
overflow: hidden;
font-size: 200%;
}
.item {
transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
}
.dot {
position: absolute;
display: block;
height: 0;
width: 0;
border: 0.2em solid;
border-radius: 1em;
}
.dot.active {
border-color: #eee;
box-shadow: 0 0 0.2em #eee;
}
.dot1 {
top: 3.75%;
left: 3.75%;
}
.dot2 {
top: 3.75%;
right: 3.75%;
}
.dot3 {
bottom: 3.75%;
right: 3.75%;
}
.dot4 {
bottom: 3.75%;
left: 3.75%;
}
.letter {
height: 10%;
width: 9.0909%;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
line-height: 160%;
}
.letter.active {
color: #eee;
text-shadow: 0 0 0.2em #eee;
}
.onoffswitch {
position: relative;
width: 86px;
margin: 1em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999;
border-radius: 50px;
}
.onoffswitch-inner, .modeswitch-inner {
width: 200%;
margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after, .modeswitch-inner:before, .modeswitch-inner:after {
float: left;
width: 50%;
height: 24px;
padding: 0;
line-height: 24px;
font-size: 18px;
color: white;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "EIN";
padding-left: 12px;
color: #eee;
transition: background-color 0.5s;
}
.onoffswitch-inner:after {
content: "AUS";
padding-right: 12px;
background-color: #eee;
color: #999;
text-align: right;
}
.onoffswitch-switch {
width: 30px;
margin: -3px;
background: #fff;
border: 2px solid #999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 58px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
.onoffswitch-checkbox:checked + .onoffswitch-label .modeswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0;
}
.modeswitch-inner:before {
content: "MIN";
padding-left: 12px;
background-color: #fff;
color: #000;
}
.modeswitch-inner:after {
content: "SEC";
padding-right: 12px;
background-color: #fff;
color: #000;
text-align: right;
}
a.uhr-configlink {
cursor: pointer;
background: url("../resources/assets/images/settings.png") no-repeat;
width: 24px;
height: 24px;
display: inline-block;
margin: 2px;
vertical-align: top;
}
.uhr-controlpanel {
border-radius: 0.5em;
box-shadow: 0 0 1em black;
background-color: #fff;
display: inline-block;
padding: 0.5em;
position: sticky;
bottom: 0;
margin-left: 1em;
}
.uhr-controlpanel .content {
position: relative;
}
a.uhr-closecontrolpanel {
cursor: pointer;
display: inline-block;
position: absolute;
right: 0;
top: -1em;
width: 24px;
height: 24px;
background: url("../resources/assets/images/close.png") no-repeat;
}
#disclaimer {
font-size: 0.5em;
}
#disclaimer a {
color: #444;
text-decoration: underline;
}

0
resources/close.png → dist/assets/close.png vendored
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 407 B

After

Width:  |  Height:  |  Size: 407 B

0
resources/settings.png → dist/assets/settings.png vendored
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 435 B

1
dist/assets/uhr-black.css vendored Normal file
View file

@ -0,0 +1 @@
.uhr.black{background-color:#111}.black .onoffswitch-inner:before{background-color:#111}.uhr.black .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.black .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}

1
dist/assets/uhr-blue.css vendored Normal file
View file

@ -0,0 +1 @@
.uhr.blue{background-color:#00a}.blue .onoffswitch-inner:before{background-color:#00a}.uhr.blue .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.blue .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}

1
dist/assets/uhr-green.css vendored Normal file
View file

@ -0,0 +1 @@
.uhr.green{background-color:#0c0}.green .onoffswitch-inner:before{background-color:#0c0}.uhr.green .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.uhr.green .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}

1
dist/assets/uhr-pink.css vendored Normal file
View file

@ -0,0 +1 @@
.uhr.pink{background-color:#f0a}.uhr.pink .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.pink .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.pink .onoffswitch-inner:before{background-color:#f0a}.uhr.pink .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.pink .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}

1
dist/assets/uhr-red.css vendored Normal file
View file

@ -0,0 +1 @@
.uhr.red{background-color:#700}.red .onoffswitch-inner:before{background-color:#700}.uhr.red .dot:not(.active){border-color:rgba(255,255,255,0.1);box-shadow:0 0 0.1em rgba(255,255,255,0.1)}.uhr.red .letter:not(.active){color:rgba(255,255,255,0.1);text-shadow:0 0 0.1em rgba(255,255,255,0.1)}

1
dist/assets/uhr-white.css vendored Normal file
View file

@ -0,0 +1 @@
.uhr.white{background-color:#ccc}.uhr.white .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.white .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.white .onoffswitch-inner:before{background-color:#ccc}.uhr.white .dot:not(.active){border-color:rgba(0,0,0,0.1);box-shadow:0 0 0.1em rgba(0,0,0,0.1)}.uhr.white .letter:not(.active){color:rgba(0,0,0,0.1);text-shadow:0 0 0.1em rgba(0,0,0,0.1)}

1
dist/assets/uhr-yellow.css vendored Normal file
View file

@ -0,0 +1 @@
.uhr.yellow{background-color:#fd0}.uhr.yellow .dot.active{border-color:#fff;box-shadow:0 0 0.1em #fff}.uhr.yellow .letter.active{color:#fff;text-shadow:0 0 0.1em #fff}.yellow .onoffswitch-inner:before{background-color:#fd0}.uhr.yellow .dot:not(.active){border-color:rgba(0,0,0,0.05);box-shadow:0 0 0.1em rgba(0,0,0,0.05)}.uhr.yellow .letter:not(.active){color:rgba(0,0,0,0.05);text-shadow:0 0 0.1em rgba(0,0,0,0.05)}

3
dist/assets/uhr.css vendored Normal file
View file

@ -0,0 +1,3 @@
/*!
* Copyright (C) Schweizerische Bundesbahnen SBB, 2019.
*/@font-face{font-family:'Uhrenfont';src:url(../assets/uhr.woff) format("woff")}body{font-family:'Uhrenfont', sans-serif}.uhr{position:relative;margin:0;transition:background-color 0.5s}.uhr .reflection{position:absolute;top:0;bottom:0;left:0;right:0;background:radial-gradient(225em 45em at 160% 0, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0) 40%) no-repeat scroll;display:block;margin:0.15em}.uhr .letterarea{display:block;position:absolute;top:12%;bottom:12%;left:12%;right:12%;overflow:hidden;font-size:200%}.item{transition:box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s}.dot{position:absolute;display:block;height:0;width:0;border:0.2em solid;border-radius:1em}.dot.active{border-color:#eee;box-shadow:0 0 0.2em #eee}.dot1{top:3.75%;left:3.75%}.dot2{top:3.75%;right:3.75%}.dot3{bottom:3.75%;right:3.75%}.dot4{bottom:3.75%;left:3.75%}.letter{height:10%;width:9.0909%;padding:0;margin:0;display:inline-block;text-align:center;line-height:160%}.letter.active{color:#eee;text-shadow:0 0 0.2em #eee}.onoffswitch{position:relative;width:86px;margin:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.onoffswitch-checkbox{display:none}.onoffswitch-label{display:block;overflow:hidden;cursor:pointer;border:2px solid #999;border-radius:50px}.onoffswitch-inner,.modeswitch-inner{width:200%;margin-left:-100%;-moz-transition:margin 0.3s ease-in 0s;-webkit-transition:margin 0.3s ease-in 0s;-o-transition:margin 0.3s ease-in 0s;transition:margin 0.3s ease-in 0s}.onoffswitch-inner:before,.onoffswitch-inner:after,.modeswitch-inner:before,.modeswitch-inner:after{float:left;width:50%;height:24px;padding:0;line-height:24px;font-size:18px;color:white;font-weight:bold;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.onoffswitch-inner:before{content:"EIN";padding-left:12px;color:#eee;transition:background-color 0.5s}.onoffswitch-inner:after{content:"AUS";padding-right:12px;background-color:#eee;color:#999;text-align:right}.onoffswitch-switch{width:30px;margin:-3px;background:#fff;border:2px solid #999;border-radius:50px;position:absolute;top:0;bottom:0;right:58px;-moz-transition:all 0.3s ease-in 0s;-webkit-transition:all 0.3s ease-in 0s;-o-transition:all 0.3s ease-in 0s;transition:all 0.3s ease-in 0s}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner,.onoffswitch-checkbox:checked+.onoffswitch-label .modeswitch-inner{margin-left:0}.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch{right:0}.modeswitch-inner:before{content:"MIN";padding-left:12px;background-color:#fff;color:#000}.modeswitch-inner:after{content:"SEC";padding-right:12px;background-color:#fff;color:#000;text-align:right}a.uhr-configlink{cursor:pointer;background:url(../assets/settings.png) no-repeat;width:24px;height:24px;display:inline-block;margin:2px;vertical-align:top}.uhr-controlpanel{border-radius:0.5em;box-shadow:0 0 1em black;background-color:#fff;display:inline-block;padding:0.5em;position:sticky;bottom:0;margin-left:1em}.uhr-controlpanel .content{position:relative}a.uhr-closecontrolpanel{cursor:pointer;display:inline-block;position:absolute;right:0;top:-1em;width:24px;height:24px;background:url(../assets/close.png) no-repeat}#disclaimer{font-size:0.5em}#disclaimer a{color:#444;text-decoration:underline}

0
resources/uhr.woff → dist/assets/uhr.woff vendored
View file

2
dist/uhr.js vendored
View file

File diff suppressed because one or more lines are too long

4
index.html
View file

@ -21,8 +21,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-title" content="Bärneruhr"/>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/uhr.css"/>
<link rel="stylesheet" type="text/css" href="css/uhr-black.css" data-class="black" data-name="Schwarz"/>
<link rel="stylesheet" type="text/css" href="dist/assets/uhr.css"/>
<link rel="stylesheet" type="text/css" href="dist/assets/uhr-black.css" data-class="black" data-name="Schwarz"/>
<link rel="stylesheet" type="text/css" href="css/uhr-white.css" data-class="white" data-name="Weiss"/>
<link rel="stylesheet" type="text/css" href="css/uhr-red.css" data-class="red" data-name="Rot"/>
<link rel="stylesheet" type="text/css" href="css/uhr-yellow.css" data-class="yellow" data-name="Gelb"/>

1344
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

8
package.json
View file

@ -37,10 +37,18 @@
"@types/js-cookie": "2.2.2",
"@typescript-eslint/parser": "1.7.0",
"chai": "4.2.0",
"clean-webpack-plugin": "2.0.2",
"css-loader": "2.1.1",
"eslint": "5.16.0",
"eslint-loader": "2.1.2",
"extract-loader": "3.1.0",
"file-loader": "3.0.1",
"mini-css-extract-plugin": "0.6.0",
"mocha": "6.1.4",
"node-sass": "4.12.0",
"phantomjs-prebuilt": "2.1.16",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"ts-loader": "5.4.5",
"typescript": "3.4.5",
"webpack": "4.30.0",

BIN
resources/assets/fonts/uhr.woff Normal file
View file

Binary file not shown.

BIN
resources/assets/images/close.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 407 B

BIN
resources/assets/images/settings.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 435 B

254
resources/styles/uhr.scss Normal file
View file

@ -0,0 +1,254 @@
/*!
* Copyright (C) Schweizerische Bundesbahnen SBB, 2019.
*/
/*
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
@font-face {
font-family: 'Uhrenfont';
src: url('../assets/fonts/uhr.woff') format('woff');
}
body {
font-family: 'Uhrenfont', sans-serif;
}
.uhr {
position: relative;
margin: 0;
transition: background-color 0.5s;
.reflection {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: radial-gradient(225em 45em at 160% 0, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%) no-repeat scroll;
display: block;
margin: 0.15em;
}
}
#themeswitcher {
}
.uhr .letterarea {
display: block;
position: absolute;
top: 12%;
bottom: 12%;
left: 12%;
right: 12%;
overflow: hidden;
font-size: 200%;
}
.item {
transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
}
.dot {
position: absolute;
display: block;
height: 0;
width: 0;
border: 0.2em solid;
border-radius: 1em;
}
.dot.active {
border-color: #eee;
box-shadow: 0 0 0.2em #eee;
}
.dot1 {
top: 3.75%;
left: 3.75%;
}
.dot2 {
top: 3.75%;
right: 3.75%;
}
.dot3 {
bottom: 3.75%;
right: 3.75%;
}
.dot4 {
bottom: 3.75%;
left: 3.75%;
}
.letter {
height: 10%;
width: 9.0909%;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
line-height: 160%;
}
.letter.active {
color: #eee;
text-shadow: 0 0 0.2em #eee;
}
.onoffswitch {
position: relative;
width: 86px;
margin: 1em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999;
border-radius: 50px;
}
.onoffswitch-inner, .modeswitch-inner {
width: 200%;
margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after, .modeswitch-inner:before, .modeswitch-inner:after {
float: left;
width: 50%;
height: 24px;
padding: 0;
line-height: 24px;
font-size: 18px;
color: white;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "EIN";
padding-left: 12px;
color: #eee;
transition: background-color 0.5s;
}
.onoffswitch-inner:after {
content: "AUS";
padding-right: 12px;
background-color: #eee;
color: #999;
text-align: right;
}
.onoffswitch-switch {
width: 30px;
margin: -3px;
background: #fff;
border: 2px solid #999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 58px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner,
.onoffswitch-checkbox:checked + .onoffswitch-label .modeswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0;
}
.modeswitch-inner:before {
content: "MIN";
padding-left: 12px;
background-color: #fff;
color: #000;
}
.modeswitch-inner:after {
content: "SEC";
padding-right: 12px;
background-color: #fff;
color: #000;
text-align: right;
}
a.uhr-configlink {
cursor: pointer;
background: url("../assets/images/settings.png") no-repeat;
width: 24px;
height: 24px;
display: inline-block;
margin: 2px;
vertical-align: top;
}
.uhr-controlpanel {
border-radius: 0.5em;
box-shadow: 0 0 1em black;
background-color: #fff;
display: inline-block;
padding: 0.5em;
position: sticky;
bottom: 0;
margin-left: 1em;
}
.uhr-controlpanel .content {
position: relative;
}
a.uhr-closecontrolpanel {
cursor: pointer;
display: inline-block;
position: absolute;
right: 0;
top: -1em;
width: 24px;
height: 24px;
background: url("../assets/images/close.png") no-repeat;
}
#disclaimer {
font-size: 0.5em;
}
#disclaimer a {
color: #444;
text-decoration: underline;
}

5
src/index.ts
View file

@ -94,9 +94,10 @@ $.widget('fritteli.uhr', {
$.fritteli.uhr.register = Globals.registerLayout;
declare namespace $ {
const fritteli: Fritteli;
const fritteli: Fritteli.Fritteli;
const widget: JQueryUI.Widget;
}
declare namespace Fritteli {
interface Fritteli {
uhr: Uhr;
}

79
webpack.config.js
View file

@ -1,13 +1,19 @@
/*
* Copyright (C) Schweizerische Bundesbahnen SBB, 2019.
*/
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: [
'./src/index.ts'
],
entry: {
uhr: './src/index.ts',
style_main: require.resolve('./resources/styles/uhr.scss'),
style_black: require.resolve('./css/uhr-black.css'),
style_blue: require.resolve('./css/uhr-blue.css'),
style_green: require.resolve('./css/uhr-green.css'),
style_pink: require.resolve('./css/uhr-pink.css'),
style_red: require.resolve('./css/uhr-red.css'),
style_white: require.resolve('./css/uhr-white.css'),
style_yellow: require.resolve('./css/uhr-yellow.css')
},
// devtool: 'inline-source-map',
mode: 'production',
module: {
@ -17,18 +23,73 @@ module.exports = {
test: /\.tsx?$/,
exclude: /node_modules/,
use: 'eslint-loader'
}, {
},
{
test: /\.(png|svg|jpg|gif|woff)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/[name].[ext]'
}
}
]
},
//////
{
test: /\.s?css$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/[name].css'
}
},
{
loader: 'extract-loader',
options: {
publicPath: '../',
}
},
'css-loader',
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed'
}
}
]
},
// {
// test: /\.s?css$/,
// use: [
// // fallback to style-loader in development
// process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
// 'css-loader',
// 'sass-loader'
// ]
// },
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: 'ts-loader'
}
]
},
plugins: [
new CleanWebpackPlugin({
dry: false,
cleanAfterEveryBuildPatterns: ['**/deleteme_*.del'],
dangerouslyAllowCleanPatternsOutsideProject: false
})
],
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'uhr.js',
filename: (chunkData) => chunkData.chunk.name === 'uhr' ? 'uhr.js' : 'deleteme_[name].del',
library: 'uhr',
path: path.resolve(__dirname, 'dist')
},