@sergey19940808

Sass, как собрать проект вебпаком?

Как запустить проект и собрать его, то есть из scss файла в css
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>
  • Вопрос задан
  • 1779 просмотров
Пригласить эксперта
Ответы на вопрос 2
nakree
@nakree
Fullstack Developer
Ответ: Как установить SASS в проект через npm?
Ответ на все будущие вопросы: https://webpack.js.org/concepts/
Ответ написан
Комментировать
Anubis
@Anubis
Люблю корейскую кухню и веб-разработку
1) entry в вебпак-конфиге указать на точку входа js-скриптов
2а) где-то в js импортировать главный scss файл, который будет импортировать в себя все остальные файлы стилей
2б) в каждом js-компоненте импортировать соответствующий ему стилевой scss-файл (общепринятая практика в React, например, но тут кому как удобнее, это не требование)
3) не забыть npm i --save-dev node-sass
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы