Build ok but CSS style is a mess

issue2914
nicolargo 2024-09-14 16:23:18 +02:00
parent 75fdc8f46e
commit ccda282bbf
8 changed files with 77 additions and 95 deletions

View File

@ -1,56 +0,0 @@
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "./variables.less";
@import "~bootstrap/less/mixins.less";
// Reset and dependencies
@import "~bootstrap/less/normalize.less";
// @import "~bootstrap/less/print.less";
// @import "~bootstrap/less/glyphicons.less";
// Core CSS
@import "~bootstrap/less/scaffolding.less";
// @import "~bootstrap/less/type.less";
// @import "~bootstrap/less/code.less";
@import "~bootstrap/less/grid.less";
@import "~bootstrap/less/tables.less";
// @import "~bootstrap/less/forms.less";
// @import "~bootstrap/less/buttons.less";
// Components
// @import "~bootstrap/less/component-animations.less";
// @import "~bootstrap/less/dropdowns.less";
// @import "~bootstrap/less/button-groups.less";
// @import "~bootstrap/less/input-groups.less";
// @import "~bootstrap/less/navs.less";
// @import "~bootstrap/less/navbar.less";
// @import "~bootstrap/less/breadcrumbs.less";
// @import "~bootstrap/less/pagination.less";
// @import "~bootstrap/less/pager.less";
// @import "~bootstrap/less/labels.less";
// @import "~bootstrap/less/badges.less";
// @import "~bootstrap/less/jumbotron.less";
// @import "~bootstrap/less/thumbnails.less";
// @import "~bootstrap/less/alerts.less";
@import "~bootstrap/less/progress-bars.less";
// @import "~bootstrap/less/media.less";
// @import "~bootstrap/less/list-group.less";
// @import "~bootstrap/less/panels.less";
// @import "~bootstrap/less/responsive-embed.less";
// @import "~bootstrap/less/wells.less";
// @import "~bootstrap/less/close.less";
// Components w/ JavaScript
// @import "~bootstrap/less/modals.less";
// @import "~bootstrap/less/tooltip.less";
// @import "~bootstrap/less/popovers.less";
// @import "~bootstrap/less/carousel.less";
// Utility classes
@import "~bootstrap/less/utilities.less";
@import "~bootstrap/less/responsive-utilities.less";

View File

@ -0,0 +1,11 @@
// Custom.scss
// Option A: Include all of Bootstrap
// It's also possible to import specifics module only:
// See https://getbootstrap.com/docs/5.3/customize/sass/
// Include any default variable overrides here (though functions won't be available)
@import '../node_modules/bootstrap/scss/bootstrap.scss';
// Then add additional custom code
@grid-columns: 24;

View File

@ -1,4 +0,0 @@
@import "~bootstrap/less/variables.less";
@grid-columns: 24;

View File

@ -3,7 +3,7 @@ if (module.hot) {
module.hot.accept();
}
import '../css/bootstrap.less';
import '../css/custom.scss';
import '../css/style.scss';
import { createApp } from 'vue';

View File

@ -4,9 +4,8 @@
"requires": true,
"packages": {
"": {
"name": "static",
"dependencies": {
"bootstrap": "^3.4.1",
"bootstrap": "^5.3.3",
"favico.js": "^0.3.10",
"hotkeys-js": "^3.10.2",
"lodash": "^4.17.21",
@ -21,14 +20,14 @@
"eslint": "^8.40.0",
"eslint-plugin-vue": "^9.12.0",
"html-webpack-plugin": "^5.5.1",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"less": "^4.2.0",
"less-loader": "^11.1.4",
"sass": "^1.62.1",
"sass-loader": "^13.2.2",
"style-loader": "^3.3.2",
"url-loader": "^4.1.1",
"vue-loader": "^17.1.1",
"webpack": "^5.82.1",
"webpack": "^5.94.0",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0"
}
@ -250,6 +249,17 @@
"node": ">= 8"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"license": "MIT",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@ -1037,11 +1047,22 @@
"dev": true
},
"node_modules/bootstrap": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
"integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==",
"engines": {
"node": ">=6"
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"license": "MIT",
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/brace-expansion": {
@ -3294,6 +3315,7 @@
"resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
"integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"copy-anything": "^2.0.1",
"parse-node-version": "^1.0.1",
@ -3316,10 +3338,11 @@
}
},
"node_modules/less-loader": {
"version": "11.1.3",
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.3.tgz",
"integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==",
"version": "11.1.4",
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.4.tgz",
"integrity": "sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 14.15.0"
},
@ -6091,6 +6114,12 @@
"fastq": "^1.6.0"
}
},
"@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true
},
"@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@ -6761,9 +6790,10 @@
"dev": true
},
"bootstrap": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
"integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA=="
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"requires": {}
},
"brace-expansion": {
"version": "1.1.11",
@ -8409,9 +8439,9 @@
}
},
"less-loader": {
"version": "11.1.3",
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.3.tgz",
"integrity": "sha512-A5b7O8dH9xpxvkosNrP0dFp2i/dISOJa9WwGF3WJflfqIERE2ybxh1BFDj5CovC2+jCE4M354mk90hN6ziXlVw==",
"version": "11.1.4",
"resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.4.tgz",
"integrity": "sha512-6/GrYaB6QcW6Vj+/9ZPgKKs6G10YZai/l/eJ4SLwbzqNTBsAqt5hSLVF47TgsiBxV1P6eAU0GYRH3YRuQU9V3A==",
"dev": true,
"requires": {}
},

View File

@ -1,7 +1,7 @@
{
"private": true,
"dependencies": {
"bootstrap": "^3.4.1",
"bootstrap": "^5.3.3",
"favico.js": "^0.3.10",
"hotkeys-js": "^3.10.2",
"lodash": "^4.17.21",
@ -16,14 +16,14 @@
"eslint": "^8.40.0",
"eslint-plugin-vue": "^9.12.0",
"html-webpack-plugin": "^5.5.1",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"less": "^4.2.0",
"less-loader": "^11.1.4",
"sass": "^1.62.1",
"sass-loader": "^13.2.2",
"style-loader": "^3.3.2",
"url-loader": "^4.1.1",
"vue-loader": "^17.1.1",
"webpack": "^5.82.1",
"webpack": "^5.94.0",
"webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0"
},
@ -31,6 +31,7 @@
"build": "webpack --progress --mode=production",
"start": "webpack serve --mode=development",
"watch": "webpack --progress --watch",
"lint": "eslint ./ --ext .js,.vue"
"lint": "eslint ./ --ext .js,.vue",
"clean": "rm -rf node_modules"
}
}

File diff suppressed because one or more lines are too long

View File

@ -23,11 +23,11 @@ module.exports = (_, env) => {
module: {
rules: [
{
test: /\.vue$/,
test: /\.vue$/i,
loader: 'vue-loader'
},
{
test: /\.scss$/,
test: /\.scss$/i,
use: [{
loader: "style-loader",
}, {
@ -37,7 +37,7 @@ module.exports = (_, env) => {
}]
},
{
test: /\.less$/,
test: /\.less$/i,
use: [{
loader: "style-loader",
}, {
@ -47,7 +47,7 @@ module.exports = (_, env) => {
}]
},
{
test: /\.css$/,
test: /\.css$/i,
use: [{
loader: "style-loader",
}, {
@ -67,7 +67,7 @@ module.exports = (_, env) => {
]
}),
!isProd && new HtmlWebpackPlugin({
template: './templates/index.html.tpl',
template: './templates/index.html',
inject: false
}),
isProd && new TerserWebpackPlugin({ extractComments: false }),