package.json
{
"name": "html_css",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "",
"start": "webpack"
},
"keywords": [],
"author": "Sergey Alekseeev",
"license": "ISC",
"dependencies": {
"sass": "^1.7.3"
},
"devDependencies": {
"node-sass": "^4.9.0",
"sass-loader": "^7.0.3",
"webpack": "^4.12.2"
}
}
webpack.config
var path = require("path");
module.exports = {
entry: "./assets/style/scss",
output: {
path: path.resolve(__dirname, "public"),
filename: "style.css",
publicPath: "/public"
},
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}]
}
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog</title>
<link rel="stylesheet" href="public/style.css">
</head>
<body>
<header class="header">
<section class="header__content block_shadow">
<h3 class="header__title">
Этот блок создавался специально для тестов и обучения
</h3>
</section>
</header>
<section class="content-main block_shadow">
<article class="content-main__post">
</article>
</section>
<footer class="footer block_shadow">
<p class="footer__content">
</p>
</footer>
</body>
</html>
Простой
Простой
Средний
Средний
Средний
