Sass, how to build a webpack project?

S

sergey199408082018-06-28 11:04:58

Sass

sergey19940808, 2018-06-28 11:04:58

How to run a project and build it i.e. from scss file to 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>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

N

nakree, 2018-06-28
@nakree

Answer: How to install SASS in a project via npm?
Answer for all future questions: https://webpack.js.org/concepts/

A

Anubis, 2018-06-28
@Anubis

1) entry in the webpack config point to the entry point of js scripts
2a) import the main scss file somewhere in js, which will import all other style files into itself
2b) in each js component import the corresponding style scss file ( common practice in React, for example, but here it’s more convenient for someone, this is not a requirement)
3) don’t forget npm i --save-dev node-sass