phares3757/webpack-demo-app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Sass loader, override bootstrap colors

Browse Source 
- Changed our main.css to main.scss
- Installed bootstrap locally so we can tweak it
- Installed sass-loader and node-sass
- Updated webpack.config file to include a .scss rule
This commit is contained in:
Colt Steele 2019-03-05 15:00:12 -08:00
parent 65c2ac4709
commit 21c9e3b623
7 changed files with 1319 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -7,12 +7,6 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<title>Webpack Demo</title>
</head>
<body class="container">

1308
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -11,7 +11,10 @@
"author": "",
"license": "ISC",
"devDependencies": {
"bootstrap": "^4.3.1",
"css-loader": "^2.1.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"

2
src/index.js
View File

@ -1,5 +1,5 @@
import { run } from "./app/app";
import "./main.css";
import "./main.scss";
import { AlertService } from "./app/alert.service";
import { ComponentService } from "./app/component.service";
const alertService = new AlertService();

3
src/main.css
View File

@ -1,3 +0,0 @@
body {
background: purple;
}

3
src/main.scss Normal file
View File

@ -0,0 +1,3 @@
$primary: teal;
$danger: purple;
@import "~bootstrap/scss/bootstrap";

8
webpack.config.js
View File

@ -9,8 +9,12 @@ module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
}
]
}