Browse Source

added support to scss botstrap webpack

merge-requests/9/head
jorge 4 years ago committed by meskio
parent
commit
c3ad3a0a84
Signed by: meskio
GPG Key ID: 52B8F5AC97A2DA86
  1. 2
      Makefile
  2. 67
      assets/_lowry.scss
  3. 1
      assets/index.js
  4. 1
      assets/style.css
  5. 2
      assets/style.scss
  6. 6614
      package-lock.json
  7. 2
      package.json
  8. 58
      webpack.config.js

2
Makefile

@ -1,6 +1,8 @@
all:
npm install
npm install --save-dev expose-loader
npm install --save-dev sass-loader
npm install --save-dev postcss-loader
npm run build
mkdir -p dist/js
cp assets/zxcvbn.js dist/js

67
assets/_lowry.scss

@ -0,0 +1,67 @@
$theme-colors: (
"primary": $blue !default;
"secondary": $gray-600 !default;
"success": $green !default;
"info": $cyan !default;
"warning": $yellow !default;
"danger": $red !default;
"light": $gray-100 !default;
"dark": $gray-800 !default;
);
/*css*/
body {
background-image:url('../img/background/lowry01.jpg');
background-color:transparent;
background-repeat: no-repeat ;
background-position:center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
padding-top:10%;
}
.login {
padding: 1rem;
border-radius: 0.6rem;
}
.logosd em{
display:none;
}
.logosd::before{
content:'';
display:block;
background:url('sd_nb.svg') no-repeat center center;
padding:0 30%;
min-height:5rem;
opacity:0.5;
}
.btn-primary {
background-color:rgba(110,180,200,1);
border-color:rgba(90,160,180,1);
}
.btn-primary:hover {
background-color:rgba(70,130,150,1);
border-color:rgba(90,160,180,1);
}
.form-group label {
color:rgba(150,220,240,1);
}
.form-control {
background-color:rgba(150,220,240,0.7);
}
.form-control::placeholder {
color:rgba(70,130,150,1);
}
.form-control:focus {
background-color:rgba(150,220,240,1);
}
.login {
background: rgba(70,130,150,0.6)
};

1
assets/index.js

@ -1,5 +1,4 @@
import "bootstrap";
import "./style.css";
import $ from "jquery"
window.jQuery = $;
window.$ = $;

1
assets/style.css

@ -1 +0,0 @@
@import '~bootstrap/dist/css/bootstrap.min.css';

2
assets/style.scss

@ -0,0 +1,2 @@
@import 'lowry.scss';
@import '~bootstrap/scss/bootstrap';

6614
package-lock.json generated

File diff suppressed because it is too large Load Diff

2
package.json

@ -22,6 +22,8 @@
"css-loader": "^0.28.7",
"expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^3.0.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.18.2",
"webpack": "^3.5.5"
}

58
webpack.config.js

@ -6,7 +6,7 @@ const path = require('path');
module.exports = {
entry: [
'jquery',
'./assets/index.js'
'./assets/index.js',
],
output: {
filename: 'bundle.js',
@ -14,26 +14,50 @@ module.exports = {
},
module: {
rules: [
//https://getbootstrap.com/docs/4.0/getting-started/webpack/
loaders: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run post css actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
}
],
rules: [
// {
// test: /\.css$/,
// use: ExtractTextPlugin.extract({
// fallback: 'style-loader',
// use: 'css-loader'
// })
// },
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},
{
loader: 'expose-loader',
options: '$'
}]
}
]},
loader: 'expose-loader',
options: 'jQuery'
},
{
loader: 'expose-loader',
options: '$'
}]
}
]
},
plugins: [
require('autoprefixer'),
new webpack.ProvidePlugin({

Loading…
Cancel
Save